我第一次使用 jQuery Isotope 插件并且非常喜欢其中的一些结果,但是我在尝试让“组合过滤器”与“排序”选项一起使用时遇到了一点问题。
我有一个过滤器和排序一起工作,但是我无法让排序功能与我的组合过滤器一起使用。
我的脚本看起来像这样,
<script type="text/javascript">
$(function(){
var $container = $('#container'),
filters = {};
$container.isotope({
itemSelector : '.element',
getSortData : {
name : function ( $elem ) {
return $elem.find('.name').text();
}
}
});
// filter buttons
$('.filter a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return;
}
var $optionSet = $this.parents('.option-set');
// change selected class
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// store filter value in object
// i.e. filters.color = 'red'
var group = $optionSet.attr('data-filter-group');
filters[ group ] = $this.attr('data-filter-value');
// convert object into array
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$container.isotope({ filter: selector });
return false;
});
var $sortBy = $('#sort-by');
$('#shuffle a').click(function(){
$container.isotope('shuffle');
$sortBy.find('.selected').removeClass('selected');
$sortBy.find('[data-option-value="random"]').addClass('selected');
return false;
});
});
</script>
我的排序代码如下所示,
<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
<li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>Course Date</a></li>
<li><a href="#sortBy=name" data-option-value="name">Course Name</a></li>
<li><a href="#sortBy=random" data-option-value="random">Random</a></li>
</ul>
这正是我在单个过滤器中使用的排序代码。任何人都可以帮助我或指出我正确的方向吗?我不是 jQuery 专家,但我正在努力学习,所以任何帮助都将不胜感激。
谢谢
克里斯