jQuery同位素 - 与多个过滤器的问题 [英] jQuery Isotope - Issue with multiple filters

问题描述

我尝试在使用Isotope.js的类似投资组合的页面中使用多个过滤器。请看这个页面： http://decart-design.com/avancia- WP / VI-tilbyr / 。单过滤器工作正常，但不是多个过滤器不:(这是我使用的一段JS代码：

$ $ p $ j $ j $ jQuery（'。过滤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 。

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

最好的问候，
Alex

解决方案

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

$ $ $ $ p $ j $ e）{
e.preventDefault（）;

if（jQuery（this）.parent（）。hasClass（'selected'））{
return;
}
$ b $ j（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（'。 ）;
portfolioItems.isotope（{filter：selector}）;

console.log（selector）;

return false;

}）;

陷入类似的问题。

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

解决方案

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.

这篇关于jQuery同位素 - 与多个过滤器的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！