使用复选框按类过滤 div

Question

我目前正在使用复选框过滤一堆div。

<ul id="filters">
<li>
<table id="filters_opt" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="checkbox" checked value="Familien" id="filter-Familien" />
<label for="filter-Familien">Familien/Kinder</label></td>
<td><input type="checkbox" checked value="Jugend" id="filter-Jugend" />
<label for="filter-Jugend">Jugend</label></td>
<td><input type="checkbox" checked value="Senioren" id="filter-Senioren" />
<label for="filter-Senioren">Senioren</label></td>
<td><input type="checkbox" checked value="Musik" id="filter-Musik" />
<label for="filter-Musik">Musik</label></td>
<td rowspan="3" align="center" id="filter_anwenden_big"><input type="button" class="send_button" value="Filter anwenden"></td>
<tr>
</table>   
</li>
</ul>

$("#filters :checkbox:checked").each(function() {
$("." + $(this).val()).show();
});

到目前为止，这显示了所有div 以及复选框选择的类。但我似乎无法理解以下内容：

当我有这些条件时： A类 B类 或组合，即 A + B + C 类

结果不应该变小吗？它似乎总是显示 A 类的所有div、B 类的所有div 和 C 类的所有div。但是我想仅显示包含类A + B的div的结果。而不是分开的 A 和 B。

我的程序员同事有什么想法吗？

小提琴！ - 这是一个工作示例。如果我检查"Erwachsene"和"Flingern"，它不应该显示"唯一的Flingern"示例或"Senioren - Flingern - Duesseltal"示例。

我想要实现的是，我激活的复选框越多，结果就越小，直到只剩下几个。

使用我当前的代码，它只是显示太多结果。因为它显示了所有带有"Flingern"类的div和所有带有"Erwachsene"类的div。

希望这能更清楚。

Answer 1

您可以像这样更改选择器查询：

$(".send_button").click(function() {
$(".filter").hide();
var classes = ['.filter'];
$("#filters :checkbox:checked").each(function() {
classes.push($(this).val());
});
$(classes.join('.')).show();
return false;
});

更新的小提琴：https://jsfiddle.net/d621ageL/1/