同位素v2网格-多个过滤器-隐藏空过滤器 [英] Isotope v2 Grid - Multiple Filters - Hide empty filters

问题描述

我当前的同位素网格具有两个用于对网格项进行排序的下拉过滤器.第一个过滤器是菜单类型，第二个过滤器是饮料类型.每个菜单类型但不包含所有的饮料类型，因此当选择了一些过滤器配置，没有结果表明，这是正确的.但是我想阻止这种情况的发生，当用户选择第一个过滤器时，第二个过滤器将隐藏空类型.

My current isotope grid has two dropdown filters that sort the grid items. The first filter is menu type, and the second filter is drink type. Each menu type however does not contain all drink types so when some filter configurations are chosen, no results are showed, which is correct. But i would like to stop this from happening by when the user selects the first filter, the second filter hides the empty types.

当前过滤器的有效Codepen: https://codepen.io/whitinggg/pen/zYGEaNb

Working Codepen of current filters: https://codepen.io/whitinggg/pen/zYGEaNb

这是我以前的过滤器代码:

This was my old filter code:

// 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');
    });
  });

我已尝试将有关此主题的代码从互联网上的其他链接更改为以下内容，但还没有运气.

I have tried to change my code to the below from other links around the internet on this topic but havent had any luck getting it to work.

// 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');
    });
  });

这可能吗?任何帮助，不胜感激！

Is this possible? Any help much appreciated!

推荐答案

工作中的Codepen

首先，在每个下拉列表中添加一个ID，以便我们区分它们.

First, add an ID to each drop-down so that we can distinguish them.

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

然后，对于每个下拉列表，添加一个更改侦听器.我们将查看菜单下拉更改侦听器的代码.

Then, for each drop-down, add a change listener. We'll look at the code for the menu drop-down change listener.

首先，从选定的下拉列表中获取类过滤器:

First, get the class filter from the selected drop-down:

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

然后，我们将选择与该类型匹配的所有网格项，以查看它们具有哪些其他类.这些其他类将是可用的类型

Then we're going to select all of the grid items matching that type, to see what other classes they have. These other classes will be the available types

     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属性，仅启用那些可用的属性.

Last, toggle the disabled property on the other drop-down, enabling only those that are available.

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

应该这样做.类型下拉列表的更改处理程序相同，但引用了相反的下拉列表.有关详细信息，请检查 codepen .

That should do it. The change handler for the type drop-down is the same but references the opposite drop-down. Check the codepen for details.

这篇关于同位素v2网格-多个过滤器-隐藏空过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！