jQuery Isotope - 多个过滤器的问题答案

【问题标题】：jQuery Isotope - Issue with multiple filtersjQuery Isotope - 多个过滤器的问题
【发布时间】：2013-12-15 21:51:35
【问题描述】：

我尝试在使用 Isotope.js 的类似投资组合的页面中使用多个过滤器。请查看此页面：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。

请有人帮我弄清楚我做错了什么吗？先感谢您！希望有人能帮我解决这个问题。

最好的问候，亚历克斯

【问题讨论】：

标签： filter jquery-isotope

【解决方案1】：

我找到了解决此问题的方法。这是一个正确的代码：

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;

});

希望这对遇到类似问题的人有所帮助。

【讨论】：