metafizzy的同位素 – 如果没有组合结果，则停用filter

我正在使用metafizzy’同位素来过滤物品。

我有2个过滤行：category1（cable，tools，stuff1，stuff2）和category2（cable1，cable2，tool1，tool2）。

如果在组合两个类别时没有结果，是否可以取消激活filter（使用CSS，例如灰色）？

示例：我单击filter’stuff2’，在类别2中没有匹配的项目，因此jQuery将类添加到类别2，就像灰色它们一样。

我的同位素代码：

jQuery.noConflict(); (function($){ var $container = $('#container'), filters = {}; $container.isotope({ itemSelector : '.element', {mfilterscript} {mfilterscript2} }); // filter buttons $('.filter a').click(function(){ var $this = $(this); // don't proceed if already selected if ( $this.hasClass('selected') ) { return; } var $optionSet = $this.parents('.option-set'); // change selected class $optionSet.find('.selected').removeClass('selected'); $this.addClass('selected'); // store filter value in object // ie filters.color = 'red' var group = $optionSet.attr('data-filter-group'); filters[ group ] = $this.attr('data-filter-value'); // convert object into array var isoFilters = []; for ( var prop in filters ) { isoFilters.push( filters[ prop ] ) } var selector = isoFilters.join(''); $container.isotope({ filter: selector }); return false; }); })(jQuery); 

Answer 1

这绝对是可能的。

你需要做几件事

1）检查滤波器arrays的长度，以确定所有可能的未来滤波器组合

例如，假设你有一个水果列表，所有水果都有一个“水果”类和一个水果类“苹果”，“梨”，“橙”等等。

你会做这样的事情：

  $('a.fruit').each(function() { var $this = $(this); var getVal = $this.attr('data-filter-value'); var numItems = $('img'+getVal+':not(.isotope-hidden)').length; // <-- This example is for filtering img tags but just replace it with whatever element you're actually filtering if(!$(this).hasClass('active') && !$that.hasClass('fruit') ){ // <-- ie it's a fruit that has not already disabled by previous filter combinations if(numItems === 0){ $this.addClass('disabled'); } else { $this.removeClass('disabled'); } } else if( $this.hasClass('active') && $this.hasClass('disabled') ){ $this.removeClass('disabled'); } else if(!$(this).hasClass('active') ) { if(numItems > 0){ $this.removeClass('disabled'); } } }); 

2）您将需要添加一些代码来处理已禁用的filter，以便无法触发它们。 最好的地方是靠近过滤程序的顶部。 即在处理任何过滤之前，您想要退出例程。

有很多方法可以做到这一点（例如， e.preventDefaults ，但在这种情况下， return false可能更安全，因此我们不必担心之后重新绑定默认行为）。

例如，您可能会执行以下操作：

  $('.filter a').click(function(){ // exit directly if filter already disabled if ($(this).hasClass('disabled') ){ return false; } else if ($(this).hasClass('selected') ) { return false; } ... }); // close routine 

这是一切工作的实例

这是该示例的所有JavaScript 。

希望有所帮助！