Isotope v2 Grid - несколько фильтров - скрыть пустые фильтры

Question

Моя текущая изотопная сетка имеет два выпадающих фильтра, которые сортируют элементы сетки. Первый фильтр - это тип меню, а второй - тип напитка. Однако каждый тип меню не содержит все типы напитков, поэтому при выборе некоторых конфигураций фильтра результаты не отображаются, что является правильным. Но я бы хотел, чтобы это не происходило, когда пользователь выбирает первый фильтр, а второй фильтр скрывает пустые типы.

Рабочий кодовый указатель текущих фильтров: 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');
    });
  });

Я пытался изменить свой код на приведенный ниже, используя другие ссылки вокруг inte rnet на этой топи c, но мне не повезло это работает.

// 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

Рабочая кодовая ручка

Сначала добавьте идентификатор в каждый раскрывающийся список, чтобы мы могли различать guish их.

<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

Last, переключите свойство disabled в другом раскрывающемся списке, включив только те, которые доступны.

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

Это должно сделай это. Обработчик изменений для раскрывающегося списка типов такой же, но ссылается на противоположный раскрывающийся список. Проверьте кодовый ручка для деталей.