按类jQuery多个筛选器
按类jQuery多个筛选器
提问于 2019-05-26 23:36:07
我正在构建一个带有多个过滤器选项的过滤器选项。我想对类进行过滤，但是我不能让它工作。我设法创建了多个过滤器。这些过滤器也可以组合在一起。但是，如果您随后调整/更改其中一个过滤器，结果将不会更新。
- First change filter 1
- Than change filter 2(Location)
- 如果现在再次更改筛选器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上)
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-26 23:47:44
您可能希望通过删除.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');
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56314940
复制相关文章
相似问题