同位素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 
      }); 

    }); 

如何合併過濾器？

例如，如果我選擇fivefiveplus，然後從builder-pick選擇框中選擇classic-group，我應該只看到包含「fiftyfiveplus classic-group」的div。目前，它顯示所有的廣告和五十五個條目。

我找到了一個很好的例子，在這裏如何結合：

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

但無法弄清楚如何落實到我的版本。

Answer 1

一些相關的CSS將有助於申請一個完整的片段演示，但是，你可以嘗試的Natu的建議SO answer做法：

• 更換filters = filters.join(', ');爲filters = filters.join('');

這應該添加&結合如逗號所述，而不是過濾其中一個或另一個。