MultiFiltering mit JQuery und Datenattribute

Question

Ich versuche, einen Multi-Filter mit dem Datenattribut für ein div, JQuery und Kontrollkästchen zu erstellen. Wenn ein Kontrollkästchen aktiviert ist, möchte ich, dass JQuery die Elemente auf dem Bildschirm entfernt, deren Datenattribut nicht alle ausgewählten Elemente enthält.

Zum Beispiel eines der Kontrollkästchen 'Werte =' Mens 'und das andere ist' Metall ', dann werden die Elemente auf dem Bildschirm, die diesen nicht entsprechen, verblassen oder ausblenden.

Hier ist ein Beispiel div mit den Daten attrbute:

<div class="col-md-3 col-sm-4 shop-grid-item" id="BSG016BK" data-attributes='["men's","wayfarer","metal","134","133","black","black"]'></div> 

Und der Filterblock umfasst:

<div class="information-blocks"> 
        <div class="block-title size-2">Gender</div> 
        <label class="checkbox-entry"> 
         <input type="checkbox" value="men's" class="filter" name="filter[]" /> <span class="check"></span> Men's 
        </label> 
        <label class="checkbox-entry"> 
         <input type="checkbox" value="women's" class="filter" name="filter[]" /> <span class="check"></span> Women's 
        </label> 
        <label class="checkbox-entry"> 
         <input type="checkbox" value="unisex" class="filter" name="filter[]" /> <span class="check"></span> Unisex 
        </label> 
      </div> 
      <div class="information-blocks"> 
       <div class="block-title size-2">Frame Material </div> 
       <label class="checkbox-entry"> 
        <input type="checkbox" value="metal" class="filter" name="filter[]" /> <span class="check"></span> Metal Frames 
       </label> 
       <label class="checkbox-entry"> 
        <input type="checkbox" value="plastic" class="filter" name="filter[]" /> <span class="check"></span> Plastic Frames 
       </label> 
       <label class="checkbox-entry"> 
        <input type="checkbox" value="wood" class="filter" name="filter[]" /> <span class="check"></span> Wood Frames 
       </label> 
      </div> 

Ich verwende:

$('.filter').on('click',function(){ 
      // 
}); 

die Selektionswerte zu erfassen aber ich bin mir nicht sicher, wie man alle diejenigen, die gerade ausgewählt sind, sammelt und dann diese Liste benutzt, um zu beginnen Verschieben Sie die Elemente aus den divs, die diese Werte nicht enthalten, in das Datenattribut.

Jede Hilfe würde sehr geschätzt oder lassen Sie mich in die richtige Richtung zeigen. Ich habe mir Tutorials und andere Bibliotheken angeschaut, aber ich sehe nichts, was mir erlaubt, mehrere Quellen zu verwenden und das Datenattribut statt einer Klasse herauszufiltern.

Answer 1

Zuerst müssen Sie Ihr Shop-grid-item Attribut ändern wie folgt aussehen:

<div class="col-md-3 col-sm-4 shop-grid-item" id="BSG016BK" data-attributes="['men\'s','wayfarer','metal','134','133','black','black']"> 
</div> 

Danach müssen Sie nur die eigneten Daten-Attribut erhalten und vergleichen mit deinen Filtern.

Hier ein JSFiddle, die in der Konsole die Attribute als ein Array anzeigen.