metafizzy 的同位素 - 如果没有组合结果，则停用过滤器答案

【问题标题】：metafizzy's isotope - deactivate filter if no combination resultmetafizzy 的同位素 - 如果没有组合结果，则停用过滤器
【发布时间】：2014-05-06 12:14:18
【问题描述】：

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

我有 2 个过滤器行： category1（电缆、工具、stuff1、stuff2）和类别 2（电缆 1、电缆 2、工具 1、工具 2）。

如果合并两个类别时没有结果，是否可以停用过滤器（使用 CSS，例如灰色）？

示例：我单击过滤器“stuff2”，在 category2 中没有匹配的项目，因此 jQuery 向 category2 添加了一个类，就像将它们变灰一样。

我的同位素代码：

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
  // i.e. 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);

【问题讨论】：

标签： jquery filter filtering jquery-isotope

【解决方案1】：

绝对有可能。

你需要做几件事

1) 检查过滤器数组的长度以了解所有可能的未来过滤器组合

例如，假设您有一个水果列表，所有这些水果都有一个类“fruit”和一个水果类型“apple”、“pear”、“orange”等的类。

你会这样做：

    $('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') ){ // <-- i.e. 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) 您需要添加一些代码来处理已禁用的过滤器，这样它们就不会被触发。最好的地方是靠近你的过滤程序的顶部。 IE。在处理任何过滤之前，您要退出例程。

有很多方法可以做到这一点（例如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

Here's a live example of everything working

这是该示例的所有JavaScript。

希望有帮助！

【讨论】：