Come posso filtrare un elenco con più valori usando jQuery e CSS?

Question

Dopo aver provato varie soluzioni trovate qui e sul resto del web, non riesco a capire la logica per farlo in modo "semplice" (o farlo funzionare del tutto).

Ho la seguente lista:

<ul class="store-list"> 
    <li data-categories="Bags Shoes Accessories Belts"> 
     <h3 itemprop="name">Enzo Poli</h3> 
    </li> 
    <li data-categories="Womenswear Shoes"> 
     <h3 itemprop="name">Ilse Jacobsen</h3> 
    </li> 
    <li data-categories="Menswear Womenswear Shoes Ties"> 
     <h3 itemprop="name">Kiman (Shoes Ties)</h3> 
    </li> 
    <li data-categories="Menswear Womenswear Shoes Knitwear"> 
     <h3 itemprop="name">Riccovero</h3> 
    </li> 
</ul> 

<button class="a">Ties</button> 
<button class="b">Ties & Shoes</button> 
<button class="c">Menswear</button> 

Ho provato con Attribute Not Equal Selector, ma che sicuramente non funziona.

var stores = $('.store-list'); 

$('button.b').on('click', function(){ 
    stores.find('li[data-categories!="Ties"][data-categories!="Shoes"]').fadeOut(); 
}); 

Un altro problema è quando seleziono una categoria diversa, gli elementi nascosti non vengono visualizzati.

So che posso usare $.each() e passare attraverso ogni elemento e utilizzare un sacco di codice per vedere se contiene la categoria e controllare se è visibile o meno. Ma speravo solo che ci sarebbe stata un'alternativa migliore e più semplice.

Quindi la Q è; Come posso mostrare/nascondere le voci dell'elenco in base a quali filtri seleziono?
See my fiddle here.

Answer 1

Prova questo:

var stores = $('.store-list'); 
 

 
$('button.a').on('click', function() { 
 
    stores.find('li').not('[data-categories~="Ties"]').fadeOut(); 
 
    stores.find('li[data-categories~="Ties"]').fadeIn(); 
 
}); 
 

 
$('button.b').on('click', function() { 
 
    stores.find('li').not('[data-categories~="Ties"], [data-categories~="Shoes"]').fadeOut(); 
 
    stores.find('li[data-categories~="Ties"], [data-categories~="Shoes"]').fadeIn(); 
 
}); 
 

 
$('button.c').on('click', function() { 
 
    stores.find('li').not('[data-categories~="Menswear"]').fadeOut(); 
 
    stores.find('li[data-categories~="Menswear"]').fadeIn(); 
 
});

body { 
 
    font-size: 0.7em; 
 
} 
 
ul, 
 
li { 
 
    list-style: none; 
 
} 
 
a { 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<ul class="store-list"> 
 
    <li data-categories="Bags Shoes Accessories Belts"> 
 
    <h3 itemprop="name">Enzo Poli</h3> 
 
    </li> 
 
    <li data-categories="Womenswear"> 
 
    <h3 itemprop="name">Ilse Jacobsen</h3> 
 
    </li> 
 
    <li data-categories="Menswear Womenswear Shoes Ties"> 
 
    <h3 itemprop="name">Kiman (Shoes Ties)</h3> 
 
    </li> 
 
    <li data-categories="Menswear Womenswear Shoes Knitwear"> 
 
    <h3 itemprop="name">Riccovero</h3> 
 
    </li> 
 
</ul> 
 

 
<button class="a">Ties</button> 
 
<button class="b">Ties & Shoes</button> 
 
<button class="c">Menswear</button>

Come potete vedere io uso data~='item' invece di != in questo modo si controlla se contiene quella parola sui dati-attributo.

Inoltre, forzare la dissolvenza di quelli che hanno la categoria in modo che tutta la gestione sia fatta. Sicuramente c'è un modo migliore per farlo, ma questa è la logica predefinita.

Answer 2

Non usare mai .fadeIn() - così, una volta scomparsi, sono spariti.

Nessuno delle schede catagories utilizza un singolo valore, in modo da controllare per = o != non darà mai una corrispondenza esatta, utilizzare ~= per abbinare parole:

https://api.jquery.com/attribute-contains-word-selector/

[Joel ha fornito risposta con il codice di , quindi fermarsi qui]

Answer 3

Penso che l'equivoco da biasimare qui sia che gli attributi data- * funzionano come le classi nella separazione di più valori per spazi. Non è così, qui state semplicemente impostando l'attributo arbtirary data-categories a una singola stringa contenente spazi, quindi provare a corrispondere su una determinata singola categoria probabilmente non funzionerà. Lì per lì, si potrebbe scorrere tutti gli elementi e pattern-abbinare il loro attributo data-categories contro il vostro obiettivo, come:

$('button.a').on('click', function(){ 
    stores.find('li').each(function() { 
     if($(this).attr("data-categories").split(" ").indexOf('Ties') == -1) { 
      $(this).fadeOut(); 
     } 
    }); 
}); 

Un approccio migliore potrebbe essere quella in classi di uso infatti invece di un attributo di dati, allora si può facilmente fare selezioni basate sul non avere una classe.

Answer 4

var stores = $('ul.store-list > li'); 
 

 
$('button.a').on('click', function(){ 
 
    stores.fadeIn(':hidden').not('li[data-categories~="Ties"]', stores).fadeOut(); 
 
}); 
 

 
$('button.b').on('click', function(){ 
 
    stores.fadeIn(':hidden').not('li[data-categories~="Shoes"], li[data-categories~="Ties"]', stores).fadeOut(); 
 
}); 
 

 
$('button.c').on('click', function(){ 
 
    stores.fadeIn(':hidden').not('li[data-categories~="Menswear"]', stores).fadeOut(); 
 
});

body { 
 
    font-size: 0.7em; 
 
} 
 

 
ul, li { 
 
    list-style: none; 
 
} 
 
a { text-decoration: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="store-list"> 
 
    <li data-categories="Bags Shoes Accessories Belts"> 
 
     <h3 itemprop="name">Enzo Poli</h3> 
 
    </li> 
 
    <li data-categories="Womenswear "> 
 
     <h3 itemprop="name">Ilse Jacobsen</h3> 
 
    </li> 
 
    <li data-categories="Menswear Womenswear Shoes Ties"> 
 
     <h3 itemprop="name">Kiman (Shoes Ties)</h3> 
 
    </li> 
 
    <li data-categories="Menswear Womenswear Shoes Knitwear"> 
 
     <h3 itemprop="name">Riccovero</h3> 
 
    </li> 
 
</ul> 
 

 
<button class="a">Ties</button> 
 
<button class="b">Ties & Shoes</button> 
 
<button class="c">Menswear</button>