由两个不同的类别筛选
问题描述:
我有一个人员及其活动的列表。由两个不同的类别筛选
我想让他们过滤两个类别,名称和活动。 我做了两个选择,并填写了一个人的名字和一个与他们的活动。
<select class="filter people">
<option value="0">ALL PEOPLE</option
<option value="1">John</option>
<option value="2">Mary</option>
<option value="3">Dan</option>
etc.
</select>
<select class="filter activities">
<option value="0">ALL ACTIVITIES</option
<option value="1">Football</option>
<option value="2">Basketball</option>
<option value="3">Painting</option>
<option value="4">Racing</option>
etc.
</select>
列表结构的示例。
<div id="wrap">
<div class="item people3 activity2">Dan:Basketball</div>
<div class="item people3 activity1">Dan:Football</div>
<div class="item people1 activity2">John:Basketball</div>
</div>
我想要的是显示包含所选过滤器的所有项目。
例如,在分类下拉列表中选择仅篮球,它会隐藏所有项目,除了Dan:Basketball
和John:Basketball
,在类别中选择篮球和JOHN下的人,它会隐藏每一个项目除了John:Basketball
。价值的项目,显示全部来自所选过滤器的项目。
这是我到目前为止尝试过的。它只适用于一个过滤器,现在我想将它与(n)
过滤器结合使用,在我的情况下是两个人员和活动。
// $('.filter').change(function(){
$('.people').change(function(){
if($(this).val()!=0) {
if(current != '') {
$('div.item').not('.'+current).show();
}
current = $(this).val();
$('div.item').not('.'+current).hide();
} else $('.item').show();
});
答
为什么不创建一个单独的功能应用的筛选?
$('.people').change(function(){
applyFilter();
});
$('.activities').change(function(){
applyFilter();
});
function applyFilter() {
// get selected people and activity
var people = $('.people').val();
var activity = $('.activities').val();
// add people and activity to filter array
var classFilter = [];
if (people !=0) {
classFilter.push('people'+people);
}
if (activity != 0) {
classFilter.push('activity' + activity);
}
// show all if filter array empty or apply filter
if (classFilter.length == 0) {
$("div.item").show();
} else {
$("div.item").hide();
$("div.item." + classFilter.join(".")).show();
}
}
你可以把它从更通用自己这里来支持额外的过滤。
答
这是一个完全通用的解决方案;)
$('select.filter').on('change', function(){
var class = '';
$('select.filter').each(function(){
if($(this).val() != 0)
class += '.' + $(this).attr('class').replace('filter ', '') + $(this).val();
});
$('.item').show();
$('.item').not(class).hide();
});
+0
尝试JSfiddle,但不幸的是它不起作用。我喜欢你的解决方案,因为它很简单。尝试编辑它,我会给你一个upvote! :) – 2014-10-20 08:25:12
工程太棒了!我喜欢添加额外n个选择过滤器的选项。 :) – 2014-10-20 08:25:51