Question

我尝试在使用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] );只是不起作用。单击第二个过滤器后，items数组只替换为新值，而不是将其添加到此数组。正如您在控制台中看到的那样，它只是替换为新值而不是将其添加到数组中。这太奇怪了......

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

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

祝你好运，亚历

Answer 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;

}）;

希望这会帮助那些遇到类似问题的人。

jQuery Isotope - 多个过滤器问题

1 个答案: