使用復選框按類過濾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/