这是我的所有过滤器的 HTML:
<div class="search-filters">
<div class="filter-block">
<label for="employee_type">Employee Type</label>
<select id="employee_type" class="category">
<option value="0">All</option>
<option value="designer">Designer</option>
<option value="manager">Manager</option>
<option value="developer">Developer</option>
<option value="quality-assurance">Quality Assurance</option>
</select>
</div>
<div class="filter-block">
<label for="years_xp">Years Experience</label>
<select id="years_xp" class="category">
<option value="0">Select years Experience</option>
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3">3 years</option>
</select>
</div>
</div>
我的结果列表如下:
<ul class="result-set">
<li class="result" data-employee-type="designer" data-xp="3" >John Smith</li>
<li class="result" data-employee-type="manager" data-xp="2" >Billy Joe</li>
<li class="result" data-employee-type="developer" data-xp="5" >John Appleseed</li>
</ul>
所以我想做的是使用 jQuery 使用数据属性过滤结果,并在更改时选择下拉菜单。现在只有一个或另一个过滤器适用于我下面的 jQuery 代码。我尝试在 Jquery 中使用 .filter 函数,但它仍然仅在更改一个下拉列表时有效。如果我改变两者,它似乎忽略了一个条件。
我的 jQuery:
var category_filters = [];
$('.category').on('change', function() {
category_filters = [];
$('.search-filters select').each(function() {
if ($(this).val() != 0) {
var category = $(this).val();
category_filters[$(this).attr('id')] = category;
}
});
var employee_type = "";
var years_xp = "";
if ('employee_type' in category_filters) {
employee_type = category_filters['employee_type'];
}
if ('years_xp' in category_filters) {
years_xp = category_filters['years_xp'];
}
$(".result-set .result").hide().filter(function() {
if (employee_type != "") {
if ($(this).attr('data-employee-type') == employee_type) {
return true;
}
}
if (years_xp != "") {
if ($(this).attr('data-xp') == years_xp) {
return true;
}
}
}).show();
});
关于我做错了什么的任何想法?我已经坚持了将近 6 个小时,并查看了其他示例,但它们似乎不适用于我的案例。
最佳答案
好的,所以您希望同时应用两个过滤器,而不是在单个过滤器匹配时才显示项目。在您的过滤器函数中,一旦找到匹配项,您就会返回 true,这就是问题所在。
我继续更新了您的代码:
$('.category').on('change', function() {
var category_filters = [];
$('.search-filters select').each(function() {
if ($(this).val() != 0) {
category_filters[$(this).attr('id')] = $(this).val();
}
});
$(".result-set .result").hide().filter(function() {
var show = true;
for (var category in category_filters) {
show = show && $(this).data(category) == category_filters[category];
}
return show;
}).show();
});
还有一个演示:https://jsfiddle.net/04v4bqw5/1/
您会注意到我也进行了一些重构。此代码假定过滤器的 id
与您要应用过滤器的数据属性的名称完全匹配,因此请确保同时检查更新后的 HTML。
javascript 的重复更少,您可以根据需要添加尽可能多的额外过滤器和匹配的数据属性,它们无需更改 javascript 即可工作。
关于过滤功能,我加点注释说明一下
// assume we'll want to show the item
var show = true;
// go over each active filter
for (var category in category_filters) {
// check if the filter value matches the data attribute value, and any
// previous filters did not exclude this item yet (show &&)
show = show && $(this).data(category) == category_filters[category];
}
return show;
关于javascript - 如何使用 jQuery 根据多个数据属性过滤列表项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38033942/