带有类别的jQuery复选框过滤器

Question

我正在创建与此jsfiddle演示中类似的过滤器： http : //jsfiddle.net/nJUb3/1/

当您在此小提琴示例中选中红色和黄色时，它显示包含它们的花朵。 我试图将其更改为以红色或黄色显示所有花朵。 它要么返回到此状态，要么更改为在仅检查红色时仅显示红色的花朵或仅显示黄色时显示红色的花朵的位置（并且在选中黄色时也将红色和红色选中则忘记了红色）。

$('.flowers-wrap,.planets-wrap').delegate('input[type=checkbox]', 'change', function() {
    var $lis = $('.flowers > div'),
        $checked = $('input:checked');
    if ($checked.length) {
        var selector = '';
        $($checked).each(function(index, element) {
            selector += "[data-category~='" + element.id + "']";
            alert(selector);
        });
        $lis.hide();
        $('.flowers > div').filter(selector).show();
    } else {
        $lis.show();
    }
});

我想要的是(red or yellow) and (small,med,large) and (mars, venus) 。 如何更改这个小提琴示例以使其按我的意愿工作？ 谢谢。

Answer 1

当您遍历所有选中的元素时，不需要创建一个选择器，只需使用每个选中的复选框的element.id即可显示它。 像这样的东西：

$('.flowers-wrap,.planets-wrap').delegate('input[type=checkbox]', 'change', function() {
    var $lis = $('.flowers > div'),
        $checked = $('input:checked');  
    if ($checked.length) {  
        $lis.hide(); 
        $($checked).each(function(index, element) {                     
            $("[data-category~='" + element.id + "']").show();                            
        });                                              
    } else {
        $lis.show();
    }
});

Answer 2

您要做的就是将selector变量声明更改为一个空数组而不是一个空字符串，然后遍历其内容过滤的每个项目：

$('.flowers-wrap,.planets-wrap').delegate('input[type=checkbox]', 'change', function() {
  var $lis = $('.flowers > div'),
      $checked = $('input:checked');    
  if ($checked.length)
  {                         
    var selectors = [];//declare empty array named selectorS
    $($checked).each(function(index, element){                            
      selectors.push("[data-category~='" + element.id + "']");                            
    });                        
    $lis.hide();         
    selectors.forEach(function(selector){//iterate over elements
      $('.flowers > div').filter(selector).show();  
    })

  }
  else
  {
    $lis.show();
  }
});