如何过滤过滤？

Question

这个想法很简单，我使用复选框来过滤一个列表，但是我无法想出如何过滤结果。

例如，“恐怖电影”的复选框返回所有带有“恐怖”类的电影，但我无法计算出如何在“今天、工作日或周末”的某一天继续过滤，只从可见的恐怖结果中筛选结果。当单击日期类型时，将返回所有具有该日期类型类的结果。

看看这个小提琴

这就是需要帮助的魔法。

$('.tags').find('input:checkbox').on('click', function() {
  $('.results > div').hide();

  $('.tags').find('input:checked').each(function() {
    $('.results > div.' + $(this).attr('rel')).addClass('active').show();
  });

  $('input.dayCheck').on('change', function() {
    $('input.dayCheck').not(this).prop('checked', false);
  });
});

Answer 1

您可以通过使用复选框为所选元素的类构建选择器来简化代码。

请注意，您应该连接到change事件来完成此操作，这样代码才能适用于那些只使用键盘导航的人。

$('.tags input:checkbox').on('change', function() {
    var classString = $('.tags :checkbox:checked').map(function() {
        return $(this).data('rel');
    }).get().join('.');

    var $divs = $('.results > div').toggle(classString == '');       
    if (classString != '')
        $divs.filter('.' + classString).show();
});

工作实例

Answer 2

您可以将检查的输入rel作为数组，然后使用.将它们连接起来，以获得类的选择器。

$('.tags').find('input:checkbox').on('click', function() {
  $('.results > div').hide();
  if($(this).hasClass('dayCheck'))
      $('input.dayCheck').not(this).prop('checked', false);
  classes = $('.tags').find('input:checked').map(function(){
    return $(this).attr('rel');
  }).get();
  selector = classes.length ? '.' + classes.join('.') : '';
  $('.results > div' + selector).addClass('active').show();
});

演示