Javascript 隐藏不包含所有指定类的所有div

在我的页面上有很多DIV，每个DIV代表一个特定的产品，具有一系列的特性。我将这些特性用作类，因此每个产品的开头都与此类似：

<div class='classA classB classC classD classE classF'>
  Product Card
</div>

理想情况下，在我的页面上，我希望每个类都有一个元素，这样当用户从下拉列表中选择一个值时，页面上只显示具有相应类的元素，而隐藏所有其他元素

此外，类的检查必须同时考虑所有的类。我的意思是，如果用户从3个下拉列表中选择值，则仅显示所有3个类都已选择的值

我尝试使用javascript实现这个想法，代码如下：

函数过滤器功率输出{ var powerInput=document.getElementByIdpowerInput.value； 如果powerInput==1{ var myClasses=document.querySelectorAll'.ph3ph'， i=0， l=myClasses.length； 对于i；i} 比回答你的问题更重要的事情。我知道这不是一个答案，但我必须表明这件事的重要性

作为一名开发人员，如果您不止一次地编写同一代码块，那么有些地方是不对的。为什么不简单地编写一个执行相同过程的函数呢

var customtog = function(cls, dis){
  var myClasses = document.querySelectorAll(cls),
      i = 0,
      l = myClasses.length;

  for (i; i < l; i++) {
      myClasses[i].style.display = dis;
  }
}

更新-在@mplungjan评论之后

---

我想这就是你的意思

$function{ $.sel.onchange，函数{ var classLst=[selDiv]； $.sel.eachfunction{ var val=该值； 如果val classLst.pushclass+val； }; classLst.sort； $.selDiv.eachfunction{ var divClassLst=$this.attrclass； if divClassLst{ $this.toggledivClassLst.split.sort.join.==classLst.join。； } } }.change；//加载时运行 }; .selDiv{display:none；} 注：可能的组合：A、B、C；D、 E和C，D 请选择 A. B C D E 请选择 A. B C D E 请选择 A. B C D E 请选择 A. B C D E 请选择 A. B C D E 产品卡A B C 产品卡D E 产品卡C-D

---

php可能与此无关，但查看您的html会很有帮助，以便为您提供具体帮助，并为将来遇到此问题的访问者提供实际帮助，以解决他们自己的类似问题。请更新我为您制作的代码片段-您的scriptcustomtog'.ph3ph'中也没有jQuery，powerInput==1？'none'：'block'；customtog'.ph1ph'，powerInput==1？'block'：'none'；该死的。。。简单是最好的。你可能需要让它更简单，并允许第三个选项。我知道最初发布的代码有点混乱，但我仍处于开发的最开始阶段，将所有步骤可视化是很有帮助的！谢谢你对如何简化它的建议，但这对将多个效果连接在一起并没有什么影响。嗨，Ofir。我们试图劝阻在这里提供投票建议——大多数人都会提出质量不高的问题，并试图回避当之无愧的DV。如果你不想因为你的答案而获得信任，那么你可以在社区维基上发布，如果你愿意的话，现在就可以在编辑中这样做。我会怎么做呢？开始时，所有div都将可见并隐藏该类与所选div不匹配的div？我试着玩你的功能，但不能让它以相反的方式工作…谢谢你的澄清，我改变了错误的行。最后一件事：我希望div只有在所有类都被选中的情况下才会出现。所以，如果我在classA和classB中选择某个对象，我只希望看到同时包含这两个类的结果。目前还没有发生这种情况。感谢您的持续支持；然而，在这些更改之后，整个代码似乎无法工作。即使尝试按此页面上的方式运行代码也不会产生任何结果。无论选择什么，分区都保持隐藏。仅在下拉列表1、2和3上尝试A、B、C-我更新以使用A、B、C选择第一个分区

if(powerInput == 1)
{
  customtog('.ph3ph', 'none');
  customtog('.ph1ph', 'block');
}
else if(powerInput == 3)
{
  customtog('.ph1ph', 'none');
  customtog('.ph3ph', 'block');       
}
else
{
  customtog('.ph1ph', 'block');
  customtog('.ph3ph', 'block');
}

customtog('.ph3ph', powerInput==1?'none':'block');
customtog('.ph1ph', powerInput==1?'block':'none');