结合使用同位素过滤的元素

我目前正在使用Isotope来过滤出版物列表，但是希望能够将标准的，记录在案的链接filter方法与select元素结合起来，因为我的第二个filter列表很长。

我正在努力解决的问题是处理两种不同类型的元素， 并将所选值组合成一个选项数组 。 我可以使filter彼此独立工作（下面的代码），但它们需要协同工作。 如何将两个不同的操作（单击或更改）和两个属性（class =或value =）组合到一个选项数组中以传递给isotopfilter？

var $container = $('#library'); // select ccskills publications by default $container.isotope({ filter: '.ccskills' }); var $optionSets = $('#library-options .option-set'), $optionLinks = $optionSets.find('a'); $optionLinks.click(function(){ var $this = $(this); // don't proceed if already selected if ( $this.hasClass('selected') ) { return false; } var $optionSet = $this.parents('.option-set'); $optionSet.find('.selected').removeClass('selected'); $this.addClass('selected'); // make option object dynamically, ie { filter: '.my-filter-class' } var options = {}, key = $optionSet.attr('data-option-key'), value = $this.attr('data-option-value'); // parse 'false' as false boolean value = value === 'false' ? false : value; options[ key ] = value; $container.isotope( options ); return false; }); // using the 'chozen' plugin to style my select element $(".chzn-select").chosen().change( function() { var industry = $("option:selected", this).val(); $container.isotope({filter: industry}); } ); 

Answer 1

您需要一个多维数组，每个filter类型都有一个数组维度。 我以前做过那个，这里有一个现场演示示例！

看到这里 ！ 对于js。

在我的js文件中，你会对名为getComboFilters（filters）的end函数感兴趣

 function getComboFilter( filters ) { var i = 0; var comboFilters = []; var message = []; for ( var prop in filters ) { message.push( filters[ prop ].join(' ') ); var filterGroup = filters[ prop ]; // skip to next filter group if it doesn't have any values if ( !filterGroup.length ) { continue; } if ( i === 0 ) { // copy to new array comboFilters = filterGroup.slice(0); } else { var filterSelectors = []; // copy to fresh array var groupCombo = comboFilters.slice(0); // [ A, B ] // merge filter Groups for (var k=0, len3 = filterGroup.length; k < len3; k++) { for (var j=0, len2 = groupCombo.length; j < len2; j++) { filterSelectors.push( groupCombo[j] + filterGroup[k] ); // [ 1, 2 ] } } // apply filter selectors to combo filters for next group comboFilters = filterSelectors; } i++; } comboFilters.sort(); var comboFilter = comboFilters.join(', '); return comboFilter; } 

这个函数处理各种filterarrays的所有推送，拼接和排序，但要使用它你需要将它添加到你的filter例程......好吧我说常规但它的例程真的因为你似乎调用filter方法2个单独的时间：

 $container.isotope({ filter: '.ccskills' }); 

然后：

  $container.isotope({filter: .industry}); 

如果要一起过滤类型，所有filter类型都必须彼此了解，这意味着它们必须在同一个javascript机箱内，并且filter方法只需要调用一次，此时它针对您的所有filter类型条件进行测试。

使用getComboFilter（filters）函数，您可以调用组合filter方法，如下所示：

 var $container = $('#library'); var filters = {}; var comboFilter = getComboFilter( filters ); $container.isotope({ filter: comboFilter }); 

最后，完全集成到您的文件将是这样的一些东西：

 var $container = $('#library'); var filters = {}; var comboFilter = getComboFilter( filters ); $container.isotope({ filter: comboFilter }); // This next part targets all the possible filter items // ie '.option-set a' just like your example $('.option-set a').click(function(){ // exit directly if filter already disabled if ($(this).hasClass('disabled') ){ return false; } var $this = $(this); var $optionSet = $(this).parents('.option-set'); var group = $optionSet.attr('data-filter-group'); // store filter value in object var filterGroup = filters[ group ]; if ( !filterGroup ) { filterGroup = filters[ group ] = []; } var comboFilter = getComboFilter( filters ); $container.isotope({ filter: comboFilter }); }); function getComboFilter( filters ) { var i = 0; var comboFilters = []; var message = []; for ( var prop in filters ) { message.push( filters[ prop ].join(' ') ); var filterGroup = filters[ prop ]; // skip to next filter group if it doesn't have any values if ( !filterGroup.length ) { continue; } if ( i === 0 ) { // copy to new array comboFilters = filterGroup.slice(0); } else { var filterSelectors = []; // copy to fresh array var groupCombo = comboFilters.slice(0); // [ A, B ] // merge filter Groups for (var k=0, len3 = filterGroup.length; k < len3; k++) { for (var j=0, len2 = groupCombo.length; j < len2; j++) { filterSelectors.push( groupCombo[j] + filterGroup[k] ); // [ 1, 2 ] } } // apply filter selectors to combo filters for next group comboFilters = filterSelectors; } i++; } comboFilters.sort(); var comboFilter = comboFilters.join(', '); return comboFilter; } 

希望这有助于某人！ 这个演示很漂亮。