jQuery Isotope - Issue with multiple filters

问题

I try to use multiple filters inside portfolio-like page which uses Isotope.js. Please take a look at this page: http://decart-design.com/avancia-wp/vi-tilbyr/. Single filter works fine but not multiple filters don't :( Here's a piece of JS code I use:

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;

});

For some reason (I don't why) but isoFilters.push( filters[prop] ); just doesn't work. After I click a second filter the items array just replaced with new value instead of adding it to this array. As you can see in console it just replaced with new value instead of adding it to the array. It's so strange...

Here's a working example from author's website: http://isotope.metafizzy.co/demos/combination-filters.html.

Could please someone help me to figure out what I make wrong? Thank you in advance! Hope someone can help me to solve this problem.

Best regards, Alex

回答1:

I've found a way to solve this issue. Here's a proper code:

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;

});

Hope this will help someone who stuck with similar problem.

来源：https://stackoverflow.com/questions/21356628/jquery-isotope-issue-with-multiple-filters

标签

filter

jquery-isotope