Javascript 带有类别的jquery复选框过滤器

我创建了一个类似于此JSFIDLE演示中的过滤器：

在这个提琴示例中，当您选中红色和黄色时，它会显示包含这两种颜色的花。我试着把它改成用红色或黄色来显示所有的花。它要么返回到此状态，要么更改为在选中“仅红色”时显示“仅红色”的花朵，要么在选中“仅黄色”时显示“仅红色”的花朵（并且在选中“黄色”时也会忘记红色）

---

我想要的是

（红色或黄色）和（小型、中型、大型）以及（火星、金星）

。如何更改此小提琴示例，使其按我希望的方式工作？谢谢。

当您遍历所有选中的元素时，您不需要创建选择器，只需使用每个选中复选框的

元素.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();
    }
});

---

您所要做的就是将

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

---

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：。谢谢您的回答。这有点像我在寻找的，但不完全是。我想要的是

（红色或黄色）和（小型、中型、大型）和（火星、金星）

这显示红色或黄色、小型或中型或…@SajalGupta当您选中它们时，是否同时选择所有红色和黄色？点击红色，

redflowers

come，如果我理解正确，请告诉我。然后单击黄色，

红色和黄色

花朵显示。单击小、

小红色或小黄色

花朵。单击“中”时，

small或medium和small或medium黄色

come。点击火星，

火星上的小型或中型红花和火星上的小型或中型黄花

显示。这是一个复杂的过滤器。类似这样：

https://bschool.careers360.com/colleges/list-of-mba-colleges-in-India

@SajalGupta

点击小花、小红花或小黄花

你要在它们之间随机选择吗？是的。用户可以按任意顺序单击其中任何一个。请查看Career360链接。那个过滤器正是我想要的。这正是Dij的代码所做的。请检查对该答案的评论。谢谢

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