produkt filtrering med jquery og data-attributter

Hej Alle,

Jeg er blevet sat til at lave en filtreringsfunktion til en webshop. Det korte af det lange er at jeg vil forsøge mig med at lave det hele clientside, for at få bedre performance.

Har indsat en række checkbokse, der f.eks. har et id="acer"

Når den bliver markeret skal der kun vises produkter hvis wrapper div har en data-brand="acer".

Den del fungerer fint nok med mit stykke jquery.

Men når jeg klistrer flere filtreringsmuligheder på, så virker de ikke og de relevante produkter kommer ikke frem på siden.

HTML Filter check bokses:

 <input type="checkbox" name="screen_group[]" value="18.4" id="18.4" />&nbsp;<span class="filter_paragraphs">18,4"</span><br />
 <input type="checkbox" name="screen_group[]" value="17.3" id="17.3" />&nbsp;<span class="filter_paragraphs">17,3"</span><br />
 <input type="checkbox" name="screen_group[]" value="15.6" id="15.6" />&nbsp;<span class="filter_paragraphs">15,6"</span><br />
 <input type="checkbox" name="screen_group[]" value="15.5" id="15.5" />&nbsp;<span class="filter_paragraphs">15,5"</span><br />
 <input type="checkbox" name="screen_group[]" value="15.4" id="15.4" />&nbsp;<span class="filter_paragraphs">15,4"</span><br />
 <input type="checkbox" name="screen_group[]" value="14" id="14" />&nbsp;<span class="filter_paragraphs">14"</span><br />
 <input type="checkbox" name="screen_group[]" value="13.3" id="13.3" />&nbsp;<span class="filter_paragraphs">13,3"</span><br />
 <input type="checkbox" name="screen_group[]" value="12.5" id="12.5" />&nbsp;<span class="filter_paragraphs">12,5"</span><br />
 <input type="checkbox" name="screen_group[]" value="11.6" id="11.6" />&nbsp;<span class="filter_paragraphs">11,6"</span><br />
 <input type="checkbox" name="screen_group[]" value="11" id="11" />&nbsp;<span class="filter_paragraphs">11"</span><br />
 <input type="checkbox" name="screen_group[]" value="10.1" id="10.1" />&nbsp;<span class="filter_paragraphs">10,1"</span><br />
 
 
 
 
 
 <input type="checkbox" name="brand_group[]" value="acer" id="acer" />&nbsp;<span class="filter_paragraphs">Acer</span><br />
 <input type="checkbox" name="brand_group[]" value="lenovo" id="lenovo" />&nbsp;<span class="filter_paragraphs">lenovo</span><br />
 <input type="checkbox" name="brand_group[]" value="samsung" id="samsung" />&nbsp;<span class="filter_paragraphs">samsung</span><br />
 
 Og så videre..

Jeg har denne JQuery function der lytter på click event på checkbokse, og herefter viser eller skjuler de produkter der har en matchende data-attribut.

det kan være f.eks.: data-brand="acer" data-screesize="15.6" data-harddisk="500" osv osv.

JQuery, der virker når jeg kun gør det på brands:

 $(document).ready(function() 
 {
 $( 'input[type="checkbox"]' ).click( function( e ) 
 {
             
 // Find alle checkbokse der er markerede
     if( $( 'input[type="checkbox"]:checked' ).length > 0 ) 
     {
     // Fjern alle produkt divs
     $( '.produkt_gruppe_div' ).fadeOut(300);
             
     // Loop igennem alle checkbokse på siden, der er markerede
     setTimeout(function(){
     $( 'input[type="checkbox"]:checked' ).each( function() 
     { 
     // Vis de produkter der har matchende data attributter ift. valgte checkbokse
     $( '.produkt_gruppe_div[data-brand=' + this.id + ']' ).fadeIn( 100 );
     $( '.produkt_gruppe_div[data-screensize=' + this.id + ']' ).fadeIn( 100 );
                 
     //$( '.produkt_gruppe_div' ).filter(':contains(' + this.id + ')').show();
                 
     // Kør funktion der placerer produkt divs ved siden af hinanden
     alignFilteredProducts( this.id );
 });
 }, 300 )
 } 
 else 
 {
 // Vis alle, hvis der ikke er afmærket noget
 $('.produkt_gruppe_div').show();
 }
 });
 });

Jeg vil gerne lave funktionen dynamisk, så jeg løbende kan indlæse flere data-attributter hvis der bliver behov for det.

Hvordan er det lige at jeg griber det forkert an?

Ser frem til svar fra et par JQuery ninjaer!

Jan