6
我想使用复选框和jQuery过滤产品列表。我有一些代码工作（感谢我以前在这里找到的答案）。jQuery多个复选框过滤器组
我想使用CSS类来显示或隐藏项目。
我想通过颜色，完成和价格筛选项目，问题是我的代码当前正在使用不同筛选器组之间的OR选择项目。
我需要能够在每个组中使用OR（例如颜色）进行过滤，但当复选框位于不同组中时使用AND进行过滤。我想这样做的方式是添加一个'。'之间的类名称，所以该项目将只匹配过滤器，如果颜色和完成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>
尽量避免在类值空的空间。 – arulmr
快速构思：不是直接使用slideDown，而是将结果放在一个数组中，以便您有3个数组，每个类别一个（例如[黑暗，光亮]和其他[平滑，撕裂]等等...... ）。然后通过混合数组来创建你的选择器：dark.smooth，dark.riven，light.smooth，light.riven等等。 – Tallmaris
为了避免你的'script'标签添加属性'type =“text/javascript”'以避免在某些情况下的问题。 –