我正在使用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);
});
我查看了其他问题,以及他们为图书馆提供的示例,但我无法让它工作。
由于
答案 0 :(得分:2)
这不是你的错!我花了一个小时才弄明白,但事实证明,现有的点击事件必须首先删除。我不知道为什么他们的例子没有显示出来。
如果您在$filters.unbind('click');
行之后添加var $filters...
,则会有效。