通过过滤,过滤器参数必须匹配 HTML 标记中的项目,否则过滤器不会返回任何内容。
小提琴演示:http: //jsfiddle.net/XWVhc/1/
我只能提供一个替代示例,因为您没有提供任何 html 标记以便我们可以调试您当前的代码,但是,我将解释它是如何工作的。
过滤器的 HTML:
这里我们有一些简单的按钮,它们将使用data-filter
附加到每个按钮的属性来过滤我们的项目。
<div id="filter-buttons-holder">
<div class="filter-button" data-filter=".dog">DOG</div>
<div class="filter-button" data-filter=".cat">CAT</div>
<div class="filter-button" data-filter=".foo">FOO</div>
<div class="filter-button" data-filter=".bar">BAR</div>
<div class="filter-button selected" data-filter=".dog, .foo, .cat, .bar">SHOW ALL</div>
</div>
同位素项目的 HTML:
这是我们同位素项目的标记,请注意,每个项目都有一个类别,isotope-item
也有一个类别,它属于什么“类别”,您可以添加多个类别,它仍然会按预期过滤。
<div id="module-columns-holder" class="isotope">
<a href="/" class="dog isotope-item">
<div><h1>DOG</h1></div>
</a>
<a href="/" class="cat foo isotope-item">
<div><h1>CAT</h1></div>
</a>
<a href="/" class="dog isotope-item">
<div><h1>DOG</h1></div>
</a>
<a href="/" class="foo isotope-item">
<div><h1>FOO</h1></div>
</a>
<a href="/" class="bar isotope-item">
<div><h1>BAR</h1></div>
</a>
</div>
JAVASCRIPT 过滤
在这里,我们设置了同位素容器,注意最后一个数据属性是一个过滤器,这实际上是您所追求的,但是您可以指定最初要过滤的“类别” 。
//Setup isotope for filters
var isotopeContainer = $('#module-columns-holder');
isotopeContainer.isotope({
itemSelector: '.isotope-item',
layoutMode : 'fitRows',
animationOptions : {
queue : false,
duration : 750,
easing: 'linear'
},
filter: '.dog, .cat, .foo, .bar'
});
点击过滤器事件
您可以将过滤器附加到我们之前创建的按钮,以便您可以进行实时过滤
$('#filter-buttons-holder .filter-button').on('click',function(){
var filters = $(this).data('filter');
var parent = $(this).closest('#filter-buttons-holder');
parent.find('.selected').removeClass('selected');
$(this).addClass('selected');
isotopeContainer.isotope({ filter: filters });
return false;
});
希望这可以帮助