Ich versuche, eine Liste von Produkten filterbar mit Checkboxen und jQuery zu machen. Ich habe Code, der funktioniert (danke an die vorherigen Antworten, die ich hier gefunden habe).jQuery mehrere Kontrollkästchen Filtergruppen
Ich möchte CSS-Klassen verwenden, um Elemente ein- oder auszublenden.
Ich versuche, die Elemente nach Farbe, Finish und Preis zu filtern, und das Problem ist, dass mein Code derzeit Elemente mit ODER zwischen den verschiedenen Filtergruppen auswählt.
Ich muss in der Lage sein, mit OR innerhalb jeder Gruppe (z. B. Farbe) aber mit UND zu filtern, wenn die Kontrollkästchen in verschiedenen Gruppen sind. Die Art und Weise, wie ich das machen möchte, besteht darin, ein '.' zwischen den Klassennamen, so dass das Objekt nur dann dem Filter entspricht, wenn die Farben AND finish UND price css classes übereinstimmen.
Beispiel # div.dark.smooth.b
Ich habe diese Konsole in Firebug versucht, und ich kann die Dinge, die ich auf diese Weise müssen filtern, aber leider weiß ich nicht, wie dies in jQuery zu erreichen. Mein Code ist unter ...
<!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>
Versuchen Sie, leere Räume in Klassenwerte zu vermeiden. – arulmr
Schnelle Idee: anstatt diseDown direkt zu verwenden, setzen Sie die Ergebnisse in ein Array, so dass Sie 3 Arrays haben, eines pro Kategorie (eines wird zum Beispiel [dunkel, hell] und das andere [glatt, zerrissen] usw.)). Dann erstellen Sie Ihre Selektoren einfach durch Mischen der Arrays: dark.smooth, dark.riven, light.smooth, light.riven etc. usw. – Tallmaris
Zu Ihrem 'script'-Tag fügen Sie bitte das Attribut' type = "text/javascript" 'hinzu, um zu vermeiden Probleme in einigen Situationen. –