Próbuję utworzyć listę produktów do filtrowania za pomocą pól wyboru i jQuery. Mam działający kod (dzięki wcześniejszym odpowiedziom, które znalazłem tutaj).jQuery wiele grup filtrów grupy wyboru
Chcę używać klas CSS do pokazywania lub ukrywania przedmiotów.
Próbuję filtrować elementy według koloru, wykończenia i ceny, a problem polega na tym, że mój kod aktualnie wybiera elementy za pomocą operatora OR między różnymi grupami filtrów.
Potrzebuję być w stanie filtrować przy użyciu LUB w każdej grupie (np. Kolor), ale z AND, gdy pola wyboru znajdują się w różnych grupach. Sposób, w jaki chcę to zrobić, to dodanie "." między nazwami klas, więc element będzie pasował do filtra tylko wtedy, gdy dopasuje się klasy kolorów AND AND AND AND css.
Przykład # div.dark.smooth.b
Próbowałem to w konsoli Firebug i mogę filtrować elementy muszę w ten sposób, ale niestety nie wiem jak to osiągnąć w jQuery. Mój kod jest poniżej ...
<!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>
Postaraj się unikać pustych przestrzeni w wartościach klasowych. – arulmr
Szybki pomysł: zamiast bezpośredniego korzystania z slideDown, umieść wyniki w tablicy, dzięki czemu masz 3 tablice, po jednej na kategorię (jedna będzie na przykład [ciemna, jasna], a druga [gładka, nitowana] itd.). Następnie twórz selektory, miksując tablice: dark.smooth, dark.riven, light.smooth, light.riven itp. – Tallmaris
Do twojego tagu 'script' dodaj atrybut' type = "text/javascript" ', aby uniknąć problemy w niektórych sytuacjach. –