按类的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 () {

    var current = this.value;

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

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

    });

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

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

    });

});