同位素 v2 網格 - 多個過濾器 - 隱藏空過濾器

Question

我當前的同位素網格有兩個下拉過濾器，用於對網格項目進行排序。 第一個過濾器是菜單類型，第二個過濾器是飲料類型。 但是，每個菜單類型都不包含所有飲料類型，因此選擇某些過濾器配置時，沒有顯示結果，這是正確的。 但是我想通過當用戶選擇第一個過濾器時阻止這種情況發生，第二個過濾器隱藏空類型。

當前過濾器的工作 Codepen： https ://codepen.io/whitinggg/pen/zYGEaNb

這是我的舊過濾器代碼：

// Select Filters
jQuery(function ($) {
    var $grid = $('.grid');
    var $selects = $('div#filterGroup select').change(function() {
        var selector = $selects.get().map(function(el) { // map the select elements ...
            return $(el).val(); // ... to an array of values
        }).join('') || '*'; // if joined array is empty-string, then default to a single '*'
        $grid.isotope({
            'filter': selector
        });
        return false;
    });

    $grid.imagesLoaded().progress( function() {
      $grid.isotope('layout');
    });
  });

我試圖將我的代碼從互聯網上關於此主題的其他鏈接更改為下面的代碼，但沒有任何運氣讓它工作。

// Select Filters
jQuery(function ($) {
    var $grid = $('.grid');
    var $selects = $('div#filterGroup select').change(function() {
        var selector = $selects.get().map(function(el) { // map the select elements ...
            return $(el).val(); // ... to an array of values
        }).join('') || '*'; // if joined array is empty-string, then default to a single '*'
        $grid.isotope({
            'filter': selector
        });
        return false;
    });

//Hide Empty Filters
    var DROP = $('div#filterGroup select option:not([data-filter=""])');
    // list of all class in html
    var strall = ''; $('.grid-item').each(function(el){ strall += $(this).attr('class')  });
    // remove select if not in strall.. TODO : needs improvement, this is kind a hack
    DROP.each(function(el){
      var nowfilter = $(this).attr('data-filter').replace('.', ''); // co_kenya
      if( strall.indexOf( nowfilter ) == -1 ){
        console.log( 'this one is missing ' + nowfilter );
        $(this).remove();
      }
    });

    $grid.imagesLoaded().progress( function() {
      $grid.isotope('layout');
    });
  });

這可能嗎？ 非常感謝任何幫助！

Answer 1

工作代碼筆

首先，在每個下拉列表中添加一個ID，以便我們可以區分它們。

<select id="menu-selector" class="filter option-set" data-filter-group="menu">
[...]
<select id="type-selector" class="filter option-set" data-filter-group="categories">

然后，對於每個下拉列表，添加一個更改偵聽器。 我們將查看菜單下拉更改偵聽器的代碼。

首先，從選定的下拉列表中獲取類過濾器：

 $('#menu-selector').change(function() {
     var selectedClass = $('#menu-selector option:selected').attr('value');

然后我們將選擇與該類型匹配的所有網格項，以查看它們還有哪些其他類。 這些其他類將是可用類型

     var availableTypes = $(`.grid-item${selectedClass}`)
       .toArray()
       .flatMap(div => Array.from(div.classList.values())) //get all of the classes
       .filter(i => !['grid-item', selectedClass.substring(1)].includes(i));  //eliminate useless ones

最后，在另一個下拉菜單上切換disabled屬性，僅啟用可用的屬性。

     $('#type-selector option')
         .each( (i,el) => $(el).prop('disabled', el.value != ""  && !availableTypes.includes(el.value.substring(1))));

那應該這樣做。 類型下拉列表的更改處理程序相同，但引用相反的下拉列表。 檢查代碼筆以獲取詳細信息。