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>

（或在jsfiddle上）

Answer 1

您可能想通过删除.hidden类来重置每个用户交互上的所有元素。在您的.change（）函数顶部，尝试以下操作：

504 Gateway Timeout

从所有元素中删除.hidden后，可以将类添加到需要它的元素中。

在JSFiddle示例中，您可以这样编写：

.removeClass('hidden');

jQuery按类别的多个过滤器

1 个答案: