jQuery中的多个过滤器 [英] Multiple filters in jQuery

问题描述

我使用 http://mixitup.io/ 库为我的简单项目列表提供过滤。一切正常，除了一件事：我需要多级过滤器。

I am using http://mixitup.io/ library to provide filtering for my simple list of items. Everything works fine, except one thing: multiple level filters which I need.

我有两种类型的过滤，一种是基于类型 。所以，让我想显示typeA从manufacturer1或一些其他组合。项目将需要满足列表中显示的那些。

I have two types of filtering, one is based on "type", and one on "manufacturer". So, lets say I want to show "typeA" from "manufacturer1", or some other combination. Items would need to satisfy both of those to be shown on the list.

我无法使它工作，点击过滤器后，我可以只显示typeA，其中将包括所有制造商，或manufacturerA，它显示多种类型，但这不是我想要的。

I can't get that to work, and upon clicking on the filters, I can show only "typeA", which will include all manufacturers, or "manufacturerA", which shows multiple types, but that's not what I want.

我已经包括jsfiddle的代码我现在在这里： http://jsfiddle.net/QtQnB/62/

I have included the jsfiddle with the code I have now here: http://jsfiddle.net/QtQnB/62/

对于过滤器，我使用这个：

For the filters, I used this:

<div id="filter">
    <span>Type</span>
    <ul class="filter-list">
        <li data-filter="lemon" class="filter" data-dimension="type"><a href="#">Lemon</a></li>
        <li data-filter="orange" class="filter" data-dimension="type"><a href="#">Orange</a></li>
        <li data-filter="apple" class="filter" data-dimension="type"><a href="#">Apple</a></li>
    </ul>


    <span>Manufacturer</span>
    <ul class="filter-list">
        <li data-filter="1" class="filter" data-dimension="manufacturer"><a href="#">1</a></li>
        <li data-filter="2" class="filter" data-dimension="manufacturer"><a href="#">2</a></li>
    </ul>
</div>

项目列表如下：

<ul id="grid">
    <li class="mix lemon small">
        <h3> small Lemon</h3>
        <p>Some text here</p>
    </li>
    <li class="mix orange small">
        <h3>small Orange</h3>
        <p>Some text here</p>
    </li>
    <li class="mix apple medium">
        <h3>medium Apple</h3>
        <p>Some text here</p>
    </li>
    <li class="mix lemon big">
        <h3>big Lemon</h3>
        <p>Some text here</p>
    </li>
    <li class="mix orange medium">
        <h3>medium Orange</h3>
        <p>Some text here</p>
    </li>
    <li class="mix apple big">
        <h3>big Apple</h3>
        <p>Some text here</p>
    </li>
</ul>

然后，简单的js代码初始化mixitup，加载初始项目并尝试应用过滤器多个类别与最后一行，这是不工作：

And then the simple js code to initialize the mixitup, load initial items and try to apply the filter for multiple categories with the last line, which is not working:

$('#grid').mixitup({
    showOnLoad: "2 orange",
    filterLogic : 'and'});

var $filters = $('.filter-list').find('li'), dimensions = {type: 'orange', manufacturer: '2' };


$filters.on('click',function(){
var $t = $(this),
    dimension = $t.attr('data-dimension'),
    filter = $t.attr('data-filter');
    console.info("dimension: "+dimension);
    console.info("filter "+filter);
    console.info("current filter for this cat: "+dimensions[dimension]);
    dimensions[dimension] = filter;
    console.info("selected filter for this cat: "+dimensions[dimension]);
    console.info("type: "+ dimensions['type']);
    console.info("manufacturer: "+ dimensions['manufacturer']);
    var filterString = dimensions['type'] + " " + dimensions['manufacturer'];



$('#grid').mixitup('filter',filterString);
});

我看过其他问题，例如他们提供的库，但我根本无法得到这个

I looked at other questions, and example they have provided with the library, but I simply cant get this to work.

感谢

推荐答案

这不是你的错！它花了我一个小时来弄清楚，但事实证明，有现有的点击事件，你必须先删除。

It's not your fault! It took me an hour to figure out, but it turns out that there are existing click events that you have to remove first. I don't know why their examples don't show it.

如果你添加 $ filters.unbind（'click'）;

If you add $filters.unbind('click'); after your var $filters... line, it'll work.

jsFiddle

这篇关于jQuery中的多个过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！