隱藏沒有合並結果的過濾器| 同位素JS

Question

我正在使用帶有復選框組合過濾器的Isotope.js創建應用程序。 我正在設法使用示例等使一切正常。

但是我發現一個問題，如何隱藏某些過濾器，將不會在過濾器上產生任何結果。

我創建了一個JSFiddle來演示我的示例。

過濾器選項：

<div id="options">
  <div class="option-set" data-group="brand">
    <input type="checkbox" value=""        id="brand-all" class="all" checked /><label for="brand-all">all brands</label>
    <input type="checkbox" value=".brand1" id="brand1" /><label for="brand1">brand1</label>
    <input type="checkbox" value=".brand2" id="brand2" /><label for="brand2">brand2</label>
  </div>
  <div class="option-set" data-group="type">
    <input type="checkbox" value=""        id="type-all" class="all" checked /><label for="type-all">all types</label>
    <input type="checkbox" value=".type1" id="type1" /><label for="type1">type1</label>
    <input type="checkbox" value=".type2" id="type2" /><label for="type2">type2</label>
  </div>
</div>

項目：

<div id="container">
  <div class="item brand1 type1 red"></div>
  <div class="item brand1 type1 red"></div>  
  <div class="item brand1 type1 red"></div>  
  <div class="item brand2 type2 blue"></div>  
  <div class="item brand2 type2 blue"></div>  
  <div class="item brand2 type2 blue"></div>  
</div>

在我的示例中，我有兩個過濾器品牌和類型。 如果選擇品牌1作為過濾器，則只能使用該品牌的類型1，因此如果要全部選中，我想隱藏類型2復選框，反之亦然。

對於任何類別而不是硬編碼類別，它都應該以可伸縮的方式工作。

我已經嘗試通過在過濾器上觸發同位素本身來實現此目的，但是沒有用。 創建事件的安排也已完成，但仍然無法從過濾后的項目中獲取可用類別。

我嘗試使用的安排項目的方法：

$$container.on( 'arrangeComplete', function( event, filteredItems ) {
  filteredItems.forEach(function(elementsData){
console.log($(elementsData.element).attr('class));
});
});

我已經花了幾個小時嘗試其他激活方法，所以有人可以指導我找到正確的解決方案。

Answer 1

嘗試這個：

    /*jshint browser:true, undef: true, unused: true, jquery: true */

var $container;
var filters = {};

$(function(){

  $container = $('#container');

  var $filterDisplay = $('#filter-display');

  $container.isotope();
  // do stuff when checkbox change
  $('#options').on( 'change', function( jQEvent ) {
    var $checkbox = $( jQEvent.target );
    manageCheckbox( $checkbox );

    var comboFilter = getComboFilter( filters );

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

    $filterDisplay.text( comboFilter );
    var comboFilters = comboFilter.split(', ');
    $(comboFilters).each(function(edx, val) {
    var myval = val;
    var hidelist = [];
    var showlist = [];
    $('.option-set input').each(function(edx, ele) {
      var selector = $(ele).attr("value") + myval;


      if(selector !== "" && $(selector).length === 0)
      {
        hidelist.push(ele);
        //$(ele).hide();
        //$("label[for='"+$(ele).attr('id')+"']").hide();
      }
      else {
      showlist.push(ele);
      }

    });
    $(hidelist).each(function(edx, item) {
            $(item).hide();
        $("label[for='"+$(item).attr('id')+"']").hide();
    });
    $(showlist).each(function(edx, item) {
            $(item).show();
        $("label[for='"+$(item).attr('id')+"']").show();
    });
  });

  });

});



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++;
  }


  var comboFilter = comboFilters.join(', ');

  return comboFilter;
}

function manageCheckbox( $checkbox ) {
  var checkbox = $checkbox[0];

  var group = $checkbox.parents('.option-set').attr('data-group');
  // create array for filter group, if not there yet
  var filterGroup = filters[ group ];
  if ( !filterGroup ) {
    filterGroup = filters[ group ] = [];
  }

  var isAll = $checkbox.hasClass('all');
  // reset filter group if the all box was checked
  if ( isAll ) {
    delete filters[ group ];
    if ( !checkbox.checked ) {
      checkbox.checked = 'checked';
    }
  }
  // index of
  var index = $.inArray( checkbox.value, filterGroup );

  if ( checkbox.checked ) {
    var selector = isAll ? 'input' : 'input.all';
    $checkbox.siblings( selector ).removeAttr('checked');


    if ( !isAll && index === -1 ) {
      // add filter to group
      filters[ group ].push( checkbox.value );
    }

  } else if ( !isAll ) {
    // remove filter from group
    filters[ group ].splice( index, 1 );
    // if unchecked the last box, check the all
    if ( !$checkbox.siblings('[checked]').length ) {
      $checkbox.siblings('input.all').attr('checked', 'checked');
    }
  }

}

提琴手： https : //jsfiddle.net/Lsg4zxu7/45/