使用复选框按类过滤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。

我的编码员有什么想法吗？

的jsfiddle！ -这是一个有效的例子。 如果我选中“ Erwachsene”和“ Flingern”，则不应显示“仅Flingern”示例，也不应显示“ Senioren-Flingern-Duesseltal”示例。

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

用我当前的代码，它只会显示太多结果。 因为它显示所有“ Flingern”类和所有“ 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/