Question

目标：能够打开/关闭列表中的项目，并使页面上的项目具有与列表项目的ID匹配的类以隐藏。应该是堆叠（即转动多个物品并将它们都隐藏起来）。

我有一堆.projectContainer，根据项目有其他类。例如，1 .projectContainer也可能包含类Ad和Book，而另一个也可能包含类Book和Web。

我有一组我用作按钮的元素。有一个＆＃34;按钮＆＃34;对于.projectContainer可能具有的每个潜在附加类（一个用于Book，一个用于Ad，一个用于Web等）。

这些按钮中的每一个按选择开始，单击时取消选择。如果未选中，我希望隐藏所有.projectContainer与相应类的对象（通过向其添加类off来完成）。

我遇到的问题是我可以成功地使用按钮关闭.projectContainer，但是当重新选择一个按钮时，它会打开与我刚刚点击的按钮对应的所有.projectContainer s，即使有些应该仍然关闭，因为仍然取消选择同样适用于它们的另一个按钮。

在任何比率：我的解决方案是，每次单击一个按钮时，创建一个当前取消选择的所有按钮的数组，然后将所有.projectContainer与数组进行比较以查找匹配的类，然后关闭各自的.projectContainer。但我不确定如何使用数组实际运行.hasClass()。

一些代码：

$(".buttons").click(function(){
  var toHide = [];
  $(this).toggleClass('red'); //being "red" means being selected
  $(".buttons").each(function(index, e){
      if ($(this).hasClass('red') == false){
          toHide.push($(this).attr('id')); //check each button to see if it is selected (red). If not, add it's id to the array
      }
  });
});

这样就可以成功创建数组toHide。但是，如何检查所有.projectContainer以查看是否有可以在toHide中找到的任何类？

这是HTML：

//example buttons
<span id="Ad" class="buttons red">Ad</span>
<span id="Web" class="buttons red">Web</span>
<span id="Book" class="buttons red">Book</span>

//example projectContainers
<div class="projectContainer Ad Book Web" id="p1">
<div class="projectContainer Book Web" id="p2">
<div class="projectContainer Ad" id="p3">

选择示例中的所有按钮（红色）。单击一个时，它将变为未选中状态（红色已删除）。然后应该将它的id添加到数组中。所有具有与该数组中的项目对应的类的projectContainer应该被赋予类off，而所有其他projectContainers应该被off删除。

EX：说，点击#Ad。它失去了课程red和＆＃34; Ad＆＃34;被添加到数组中。然后针对数组检查projectContainer，#p1和#p3被赋予类off，因为它们具有与数组内容匹配的类。

替代地

完全有可能我正在做的是一种非常倒退的方式，并且过滤结果比看起来容易得多。我不是一个聪明人。如果有更方便的方法，请告诉我！

Answer 1

根据匹配的ID使用过滤器和一组构造的类选择器：

此示例使用任何选项进行匹配：

$(".buttons").click(function(){
    $(this).toggleClass('red');
    var a = $(".buttons.red").map(function() { return this.id; }).get();
    var classes = a.length ? ("." + a.join(",.")) : "";
    $('.projectContainer').hide().filter(classes).show();
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/hdm4cyf2/1/

并且这个要求所有选择匹配：

$(".buttons").click(function(){
    $(this).toggleClass('red');
    var a = $(".buttons.red").map(function() { return this.id; }).get();
    var classes = a.length ? ("." + a.join(".")) : "";
    $('.projectContainer').hide().filter(classes).show();
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/hdm4cyf2/2/

根据@Artur Filipiak的回答，对于AND逻辑，您可以通过简单地依次检查每个类并在它们存在时启用它们来避免数组。

Answer 2

我没有看到阵列是必要的。您可以直接在循环中隐藏元素：

$(".buttons").click(function(){
    $('.projectContainer').show();
    $(this).toggleClass('red');
    $(".buttons").each(function(){
        $(this).hasClass('red') || $('.projectContainer.'+this.id).hide();
    });
});

JSFiddle

使用jQuery过滤不符合标准的结果（即，具有某个类）

替代地

2 个答案: