5

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

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

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

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

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

<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，加载初始项目并尝试使用最后一行对多个类别应用过滤器，这不起作用：

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

我查看了其他问题，以及他们随图书馆提供的示例，但我根本无法让它发挥作用。

谢谢

4

1 回答 1

2

这不是你的错！我花了一个小时才弄清楚，但事实证明，您必须先删除现有的点击事件。我不知道为什么他们的例子没有显示出来。

如果你$filters.unbind('click');在你的var $filters...行之后添加，它会起作用。

jsFiddle

于 2013-10-23T10:27:54.607 回答