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! - 这是一个有效的例子。如果我查看＆＃34; Erwachsene＆＃34;和＆＃34; Flingern＆＃34;它不应该只显示＆＃34;只有Flingern＆＃34;例如，＆＃34; Senioren - Flingern - Duesseltal＆＃34;示例

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

使用我当前的代码，它只显示太多结果。因为它显示所有div与类＃34; Flingern＆＃34;所有与班级＆＃34; Erwachsene＆＃34;。

希望这更清楚。

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/

使用复选框按类过滤div

1 个答案: