jquery - 过滤后如何过滤？

Question

这个想法很简单，我使用复选框来过滤列表，但我不知道如何过滤结果。

例如，恐怖电影的复选框会返回所有具有“恐怖”类别的电影，但我无法弄清楚如何继续过滤给定的一天“今天、工作日或周末”，仅显示结果从可见的恐怖结果来看。单击日期类型时，我会返回具有该日期类型类别的所有结果。

看看这个 fiddle

这是需要一点帮助的魔法。

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

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

请注意，您应该 Hook 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();
});

Working example