Question

我有一份人员及其活动清单。

我希望将它们按两个类别进行过滤， NAME 和 ACTIVITY 。我做了两个选择，用一个人的名字和一个用他们的活动填写一个。

<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以外的所有项目，在类别下选择 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();
    }
 }

您可以从此处开始更加通用，以支持其他过滤。

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

});

按两个不同类别过滤

2 个答案: