Isotop JS Multiple Checkbox Filter

Question

Ich habe diese hier Kontrollkästchen in zwei verschiedenen Sektionen:

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

Hier ist der Code für die Isotopen:

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

    }); 

Wie kombiniere ich Filter?

Zum Beispiel, wenn ich fünfundfünfzigplus, dann classic-Gruppe danach aus den Builder-Pick-Auswahlfeldern auswähle, sollte ich nur die divs sehen, die "fiftyfiveplus classic-group" enthalten. Im Moment zeigt es alle Allages und fünfzigfünfzig Einträge.

fand ich ein gutes Beispiel dafür, wie man kombinieren:

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

aber kann nicht herausfinden, wie es in meiner Version zu implementieren.

Answer 1

Einige der relevanten CSS würde helfen, eine vollständige Schnipsel Demo bewerben, aber Sie Natu versuchen können vorgeschlagen SO answer Ansatz:

• filters = filters.join(', '); Ersetzen für filters = filters.join('');

Dies sollte hinzufügen & den Mähdrescher ausgewählte Optionen, anstatt das eine oder das andere zu filtern, wie mit dem Komma angegeben.