我正在尝试使用复选框和 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>