Sto provando a rendere un elenco di prodotti filtrabili utilizzando le checkbox e jQuery. Ho del codice funzionante (grazie alle risposte precedenti che ho trovato qui).jQuery multiple gruppi di filtri checkbox
Desidero utilizzare le classi CSS per mostrare o nascondere elementi.
Sto cercando di filtrare gli articoli per colore, finitura e prezzo e il problema è che il mio codice sta attualmente selezionando gli elementi usando OR tra i diversi gruppi di filtri.
Devo essere in grado di filtrare usando OR all'interno di ciascun gruppo (ad es. Colore) ma con AND quando le caselle di controllo sono in gruppi diversi. Il modo in cui voglio farlo è aggiungendo un '.' tra i nomi delle classi, quindi l'elemento corrisponderà al filtro solo se le classi css di colore AND finish AND price sono abbinate.
esempio # div.dark.smooth.b
Ho provato questo in console Firebug e posso filtrare gli elementi di cui ho bisogno in questo modo, ma purtroppo non so come raggiungere questo in jQuery. Il mio codice è sotto ...
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul id="colour">
<li><input type="checkbox" name="colour" value="dark"> Dark</li>
<li><input type="checkbox" name="colour" value="medium"> Medium</li>
<li><input type="checkbox" name="colour" value="light"> Light</li>
</ul>
<ul id="finish">
<li><input type="checkbox" name="finish" value="smooth"> Smooth</li>
<li><input type="checkbox" name="finish" value="riven"> Riven</li>
<li><input type="checkbox" name="finish" value="honed"> Honed</li>
</ul>
<ul id="price">
<li><input type="checkbox" name="price" value="a"> Up to £25</li>
<li><input type="checkbox" name="price" value="b"> £25 to £45</li>
<li><input type="checkbox" name="price" value="c"> £45 to £65</li>
<li><input type="checkbox" name="price" value="d"> £65 to £85</li>
<li><input type="checkbox" name="price" value="e"> over £85</li>
</ul>
<div class="dark smooth b">dark smooth b</div>
<div class="medium honed d">medium honed d</div>
<div class="dark smooth d">dark smooth d</div>
<div class="light smooth b">light smooth b</div>
<div class="light riven b">light riven b</div>
<div class="dark riven c">dark riven c</div>
<div class="medium riven a">medium riven a</div>
<script>
$("#colour :checkbox,#finish :checkbox,#price :checkbox").click(function() {
$("div").hide();
$("#colour :checkbox:checked").each(function() {
$("." + $(this).val()).slideDown('slow');
});
$("#finish :checkbox:checked").each(function() {
$("." + $(this).val()).slideDown('slow');
});
$("#price :checkbox:checked").each(function() {
$("." + $(this).val()).slideDown('slow');
});
});
</script>
</body>
</html>
cercare di evitare gli spazi vuoti nei valori di classe. – arulmr
Idea veloce: invece di usare direttamente slideDown, metti i risultati in un array in modo da avere 3 array, uno per categoria (uno sarà ad esempio [dark, light] e l'altro [smooth, riven] e così via ...). Quindi crea i tuoi selettori semplicemente mescolando gli array: dark.smooth, dark.riven, light.smooth, light.riven, ecc. Ecc. – Tallmaris
Al tuo tag 'script' per favore aggiungi attributo' type = "text/javascript" 'per evitare problemi in alcune situazioni. –