按类的jQuery多个过滤器

Question

我正在构建一个带有多个过滤器选项的过滤器选项。我想过滤课程，但我无法让它工作。我设法创建了多个过滤器。这些过滤器也可以组合使用。但是，如果您随后调整/更改这些过滤器之一，则结果不会更新。

• 先换滤芯1

• 比更改过滤器 2（位置）

• 如果您现在再次更改过滤器 1（过滤器 2 未更改），则不会更新结果。

$('select').change(function() {

  var current = this.value;

  $.each($('#FilterContainer').find('div.all').not('.hidden').not('.' + current), function() {

    $(this).addClass('hidden');

  });

  $.each($('#FilterContainer').find('div.all').is('.' + current), function() {

    $(this).removeClass('hidden');

  });

});

.hidden { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<p>Filter:</p>

<select class="filterby">

  <option value="all"><h5>Show All</h5></option>

  <option value="1"><h5>One</h5></option>

  <option value="2"><h5>Two</h5></option>

  <option value="3"><h5>Three</h5></option>

</select>

<p>Location:</p>

<select class="filterby">

  <option value="all"><h5>All Locations</h5></option>

  <option value="nj"><h5>NJ</h5></option>

  <option value="ny"><h5>NY</h5></option>

  <option value="pa"><h5>PA</h5></option>

</select>

<div id="FilterContainer">

  <div class="all 1 nj">Test One NJ</div>

  <div class="all 1 ny">Test One NY</div>

  <div class="all 1 pa">Test One PA</div>

  <div class="all 2 nj">Test Two NJ</div>

  <div class="all 2 ny">Test Two NY</div>

  <div class="all 2 pa">Test Two PA</div>

  <div class="all 3 nj">Test Three NJ</div>

  <div class="all 3 ny">Test Three NY</div>

  <div class="all 3 pa">Test Three PA</div>

</div>

Answer 1

您可能希望通过删除 .hidden 类来重置每个用户交互中的所有元素。在 .change() 函数的顶部，试试这个：.removeClass('hidden');从所有元素中删除 .hidden 后，您可以将该类添加到需要它的元素中。在 JSFiddle 示例中，您可以这样编写：$('select').change(function () {&nbsp; &nbsp; var current = this.value;&nbsp; &nbsp; $.each($('#FilterContainer').find('div.all'), function () {&nbsp; &nbsp; &nbsp; &nbsp; $(this).removeClass('hidden');&nbsp; &nbsp; });&nbsp; &nbsp; $.each($('#FilterContainer').find('div.all').not('.' + current), function () {&nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass('hidden');&nbsp; &nbsp; });});