チェックボックスとjQueryを使用して製品のリストをフィルタリング可能にしようとしています。私はいくつかのコードを機能させています（ここで見つけた以前の回答のおかげで）。
CSSクラスを使用してアイテムを表示または非表示にしたい。
色、仕上げ、価格でアイテムをフィルタリングしようとしていますが、問題は、コードが現在、異なるフィルターグループ間でORを使用してアイテムを選択していることです。
各グループ（色など）内でORを使用してフィルタリングできる必要がありますが、チェックボックスが異なるグループにある場合はANDを使用します。これを行う方法は、「。」を追加することです。クラス名の間にあるため、アイテムは、色と仕上げと価格のcssクラスが一致する場合にのみフィルターに一致します。
例＃div.dark.smooth.b
これをFirebugコンソールで試しましたが、この方法で必要なアイテムをフィルタリングできますが、残念ながら、jQueryでこれを実現する方法がわかりません。私のコードは以下です...
<!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>