javascript - 按两个不同类别过滤

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>

我想要的是显示包含所选过滤器的所有项目。

例如，在类别下拉列表中仅选择BASKETBALL，它将隐藏除Dan:Basketball和John:Basketball之外的所有项目，选择< em>BASKETBALL 在类别下，JOHN 在人员下，它将隐藏除 John:Basketball 之外的所有项目。值为0的项目，显示所选过滤器中的所有项目。

这是我迄今为止尝试过的。它仅适用于一个过滤器，现在我想将其与 (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();
    }
 }

您可以从此处自行使其更加通用，以支持其他过滤。