Javascript jQuery中的多个过滤器

我正在使用库为我的简单项目列表提供筛选。一切正常，除了一件事：我需要的多级过滤器

我有两种类型的过滤，一种基于“类型”，另一种基于“制造商”。假设我想显示“manufacturer1”中的“typeA”，或者其他组合。项目需要同时满足列表上显示的两个条件

我不能让它工作，点击过滤器，我只能显示“typeA”，其中包括所有制造商，或“manufacturerA”，其中显示多种类型，但这不是我想要的

我在这里的代码中包含了JSFIDLE：

对于过滤器，我使用了以下方法：

<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>

我看了其他的问题，以及他们提供给图书馆的例子，但我就是不能让它起作用

---

谢谢，这不是你的错！我花了一个小时才弄明白，但事实证明，有一些现有的点击事件必须先删除。我不知道为什么他们的例子没有说明这一点

如果添加

$filters.unbind（'click'）在您的
var$filters…
行之后，它就可以工作了

似乎就是这样。我也花了几个小时在这上面，真的被整个“哦，来吧，你为什么不过滤它”的事情弄得筋疲力尽。非常感谢。由于某些原因，showOnLoad选项无法正常工作，我必须执行
$（'[data filter=“orange”]'）。单击（）
$（'[data filter=“2”]'）。单击（）
使筛选器加载我需要的初始列表，因为
showOnLoad:“orange 2”
不起任何作用。我发现初始加载的解决方案是在初始化后直接调用筛选器：。
<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>

$('#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);
});