我正在使用jQuery同位素插件根据其类别过滤一组结果。我试图更进一步,同时重新排序过滤结果(对于每个类别,项目将有不同的排序顺序。)
单击某个类别时,这些项目将过滤为具有匹配类别的项目。在下面的示例中,有两个项目:两个项目分类为“类别发言人”和“类别支持者”,因此当我在过滤器导航中单击其中任何一个类别时,都会显示这两个项目。我现在要做的是根据视图中的类别对这些项目进行不同的排序。
选择“扬声器”时,首先显示“后1”。选择“支持者”时,首先显示“后2”。排序将基于项目中的其他类(sort-speakers-1,sort-speakers-2,sort-supporters-1,sort-supporters-2等)。
我希望这是有道理的!我尝试使用getSortData选项,但我做错了。同位素文档有意义,我可以单独进行过滤和排序..但不能同时运气。
以下简化过滤器代码
HTML:
<!-- Grid of filterable/sortable items -->
<div id="Grid">
<div id="post-1" class="category-supporters category-speakers item sort-speakers-1 sort-supporters-2" data-slug="lorem-ipsum-dolor">
<div class="itemButton format-standard"></div>
<div class="small-info" data-permalink="http://external-link.com" data-title="Lorem Ipsum">
<div class="entry-image clearfix">
<div class="hover-content zoom">
<a title="Lorem Ipsum" href="http://external-link.com" class="preload imgSmall item-preview iconPost" rel="">
<img src="logo.jpg" alt="" />
</a>
</div>
</div>
</div>
</div>
<div id="post-2" class="category-speakers category-supporters item sort-speakers-2 sort-supporters-1" data-slug="lorem-ipsum-dolor">
<div class="itemButton format-standard"></div>
<div class="small-info" data-permalink="http://external-link.com" data-title="Lorem Ipsum">
<div class="entry-image clearfix">
<div class="hover-content zoom">
<a title="Lorem Ipsum" href="http://external-link.com" class="preload imgSmall item-preview iconPost" rel="">
<img src="logo2.jpg" alt="" />
</a>
</div>
</div>
</div>
</div>
</div>
JavaScript的:
jQuery(document).ready(function(){
$container = jQuery('#Grid');
$container.isotope({
itemSelector : '.item',
transformsEnabled: false,
masonry: {
columnWidth: 160
}
});
$optionLinks.click(function(){
var $this = jQuery(this);
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
$this.parent().parent().prev('a').addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
}
return false;
});
});
有关如何每次修改JavaScript的建议吗?
答案 0 :(得分:3)
同位素文档是有道理的,我可以单独进行过滤和排序..但不能同时运气。
我目前正在研究同位素项目。我发现一次排序和过滤没有问题。
我建议将排序值放在数据属性中:
<div data-sort-speaker="1">
这使得检索值更容易(但这只是我)。然后:
$.container.isotope({
// all your other initialization options here.
getSortData: {
speakers: function ($elem) {
return $elem.data('sort-speaker'); // will return 1 in this example.
}
}
});
// On button click:
$.container.isotope({filter: '.category-speakers', sortBy: 'speakers'});
有关如何每次修改JS的建议吗?
您可以尝试拨打
$.container.isotope('reLayout');
每一次。但是,如果每次都修改过滤器或排序选项,则不需要这样做。