如何将包含性过滤器按钮组与同位素中的多个专用过滤器按钮组/下拉菜单结合在一起

Question

我正在使用同位素，试图创建一个包含一个包含过滤器按钮组和多个单独过滤器按钮组/下拉列表的画廊。使这项工作缺失的代码片段是什么？

我想结合...

包含（“或”）过滤器（例如颜色：红色，。绿色） -有效地允许用户选择要包括在其“搜索”中的项目类别- 使用一组按钮或按钮样式的复选框

…与…

多个排他（'AND'）过滤器集（例如red.square，red.rounded，red.square.large，red.rounded.large，green.square，green。四舍五入，绿色正方形。大型）。 -有效地允许用户从结果中进一步过滤- 使用其他按钮或复选框组以及下拉列表。

我认为，这基本上也是用户rostik在此处的同位素GitHub页面上的页面底部所要求的：https://github.com/metafizzy/isotope/issues/771 不幸的是，问题尚未得到解答，问题已经解决。

基于Dave DeSandro的Codepen“同位素-复选框和下拉列表，包含和不包含过滤器”（https://codepen.io/desandro/pen/iBkzF），我尝试在自己的Codepen中创建解决方案：https://codepen.io/fvv/pen/JqLxyW

我的另一种尝试是从DeSandro的“带有复选框2的同位素组合过滤器”（https://codepen.io/desandro/pen/MebyMR）开始，然后尝试将某些复选框数组变成下拉列表：https://codepen.io/fvv/pen/xNWMEE

但是由于我缺乏JS技能，所以我都无法尝试工作。

我还假设这可能会导致一些大型过滤器查询，这意味着我大概需要使用一个函数。这是这里的建议：Isotope - Radio Buttons + Combination Filters

但是，再次失败，我一直没有尝试根据需要进行合并。

---

我最初的想法是简单地创建其他$ checkboxes变量集，但是随后我很快意识到这可能行不通，因为这段代码似乎创建了一个从包含过滤到下拉列表和排除的映射。筛选到复选框-当我需要一个允许使用下拉列表进行独家筛选的方案时。所以我删除了更改。

var $selects = $('#form-ui select');
var $checkboxes = $('#form-ui input');

$selects.add( $checkboxes ).change( function() {
  // map input values to an array
  var exclusives = [];
  var inclusives = [];
  // exclusive filters from selects
  $selects.each( function( i, elem ) {
    if ( elem.value ) {
      exclusives.push( elem.value );
    }
  });
  // inclusive filters from checkboxes
  $checkboxes.each( function( i, elem ) {
    // if checkbox, use value if checked
    if ( elem.checked ) {
      inclusives.push( elem.value );
    }
  });

  // combine exclusive and inclusive filters

  // first combine exclusives
  exclusives = exclusives.join('');

  var filterValue;
  if ( inclusives.length ) {
    // map inclusives with exclusives for
    filterValue = $.map( inclusives, function( value ) {
      return value + exclusives;
    });
    filterValue = filterValue.join(', ');
  } else {
    filterValue = exclusives;
  }

  $output.text( filterValue );
  $container.isotope({ filter: filterValue })
});