由两个不同的类别筛选

Question

我有一个人员及其活动的列表。

我想让他们过滤两个类别，名称和活动。 我做了两个选择，并填写了一个人的名字和一个与他们的活动。

<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(); 

}); 

Answer 1

为什么不创建一个单独的功能应用的筛选？

见Fiddle

$('.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(); 
    } 
} 

你可以把它从更通用自己这里来支持额外的过滤。

Answer 2

这是一个完全通用的解决方案;）

$('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(); 

});