javascript - Isotope JS 多复选框过滤器

Question

我在两个不同的部分中有这些复选框:

 <div class="col-sm-3 choose_lifestyle">

    <input type="checkbox" id="fiftyfiveplus" name="fiftyfiveplus" value=".fiftyfiveplus">
    <label for="fiftyfiveplus">55+ Exclusive</label>

    <input type="checkbox" id="allages" name="allages" value=".allages">
    <label for="allages">All-Ages</label> 

</div>
<div class="col-sm-3 builder-pick">  
    <input id="cbx_classic" type="checkbox" name="cbx_classic" value=".classic-group" />
    <label for="cbx_classic">Classic Homes</label>

    <input id="cbx_nvhomes" type="checkbox" name="cbx_nvhomes" value=".nvhomes" />
    <label for="cbx_nvhomes">NVHomes</label>

    <input id="cbx_ryan" type="checkbox" name="cbx_ryan" value=".ryan-homes" />
    <label for="cbx_ryan">Ryan Homes</label>

    <input id="cbx_winchester" type="checkbox" name="cbx_winchester" value=".winchester-homes" />
    <label for="cbx_winchester">Winchester Homes</label>
</div>

<!-- Some example results -->
<div id="wpv-view-layout-99-TCPID101">
  <div class="home_wrapper allages classic-group">

  </div>
  <div class="home_wrapper fiftyfiveplus classic-group">

  </div>
  <div class="home_wrapper fiftyfiveplus nvhomes">

  </div>
</div>

这是同位素的代码:

var container = jQuery('#wpv-view-layout-99-TCPID101 > .row');
     var checkboxes = jQuery("input[type='checkbox']");

     container.isotope({
          itemSelector: '.home_wrapper'
     });

     var isotope = container.data('isotope');


     checkboxes.change(function() {
          var filters = [];
          // get checked checkboxes values
          checkboxes.filter(':checked').each(function() {
               filters.push(this.value);
          });

          console.log(filters);
          filters = filters.join(', ');
          container.isotope({
               filter: filters
          });

     });

如何组合过滤器？

例如，如果我选择 Fifth Fiveplus，然后从构建器选择选择框中选择 classic-group，我应该只看到包含“fifty Fiveplus classic-group”的 div。目前，它显示了所有年龄和五十五多个条目。

我在这里找到了一个关于如何组合的很好的例子:

https://codepen.io/desandro/pen/JEojz

但不知道如何将其实现到我的版本中。

Answer 1

一些相关的 CSS 将有助于应用完整的代码片段演示，但是，您可以尝试 Natu 的建议 SO answer方法:

• 将 filters =filters.join(', '); 替换为 filters =
过滤器.join('');

这应该添加并组合所选选项，而不是过滤其中之一，如逗号所示。