由兩個不同的類別篩選

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

});