jQuery同位素 - 多个过滤器的问题



我尝试在使用isotope.js的Portfolio样页面中使用多个过滤器。请查看此页面:http://decart-design.com/avancia-wp/vi-tilbyr/。单过滤器正常工作,但不是多个过滤器:(这是我使用的JS代码:

jQuery('.filtering li').on('click', 'a', function(e) {
e.preventDefault();
if ( jQuery(this).parent().hasClass('selected') ) {
    return;
}
var filters = {},
    optionSet = jQuery(this).parents('.option-set');
jQuery(this).parent().parent().find('li').removeClass('selected');
jQuery(this).parent().addClass('selected');
var group = optionSet.data('filter-group');
filters[group] = jQuery(this).data('filter');
var isoFilters = [];
for ( var prop in filters ) {
    isoFilters.push( filters[prop] );
}
var selector = isoFilters.join('');
var portfolioItems = jQuery(this).parent().parent().parent().parent().find('.filterable-items');
portfolioItems.isotope({ filter: selector });
console.log(selector);
return false;

});

出于某种原因(我不是为什么),但是isoFilters.push( filters[prop] );只是行不通。单击第二个过滤器后,项目数组刚刚替换为新值,而不是将其添加到此数组中。如您在控制台中所见,它只是用新值替换而不是将其添加到数组中。太奇怪了...

这是作者网站上的一个工作示例:http://isotope.metafizzy.co/demos/combination-filters.html。

可以让某人帮助我弄清楚我做错了什么?先感谢您!希望有人可以帮助我解决这个问题。

最好的问候,Alex

我找到了一种解决此问题的方法。这是一个适当的代码:

jQuery('.filtering li').on('click', 'a', function(e) {
e.preventDefault();
if ( jQuery(this).parent().hasClass('selected') ) {
 return;
}
jQuery(this).parent().parent().find('li').removeClass('selected');
jQuery(this).parent().addClass('selected');
var isoFilters = [];
var elems = jQuery(this).parents('.filter-wrap').find('li.selected a');
jQuery.each(elems, function(i, e){
  isoFilters.push(jQuery(e).attr('data-filter'));
});
var selector = isoFilters.join('');
var portfolioItems = jQuery(this).parent().parent().parent().parent().find('.filterable-items');
portfolioItems.isotope({ filter: selector });
console.log(selector);
return false;

});

希望这将帮助遇到类似问题的人。

最新更新