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

您可以将选中的输入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();
});

DEMO

Answer 2

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

请注意，您应该挂钩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

如何过滤过滤？

2 个答案: