Javascript 已隐藏多个切换隐藏div，但未隐藏

我试图用一些按钮切换一些

div

s的可见性。我有两个按钮可以切换不同的元素。当前，当您按下切换按钮时，它将隐藏

div

s，但当您按下第二个按钮时，它将切换其

div

s的可见性，以及共享相同类/ID的其他

div

s的可见性（从而取消隐藏它们）

示例（也在中）：

document.querySelector（.a”）.addEventListener（“单击”，myFunction）；
document.querySelector（“.b”）.addEventListener（“单击”，myFunction）；
函数myFunction（）{
让id=document.querySelectorAll（this.getAttribute（'data-stuff'）；
for（设i=0，len=id.length；i

hi
你好
你好
你好
你好
你好
你好

关于如何检查

div

是否已隐藏的直觉是正确的。有时，您不得不为看似简单的函数编写一个丑陋的if-else块。但是看看你的代码，我有一些其他的评论可能会对你的项目有所帮助

首先，

id

属性对于每个元素都应该是唯一的，即没有两个元素具有相同的

id

。html并没有强制执行这一点，但它只会导致问题。另一方面，允许元素具有多个

类

e。我建议将

stuff1

类应用于受一个按钮影响的所有

div

s，将

stuff2

类应用于受另一个按钮影响的所有

div

s。一些

div

s可能同时获得这两个类，这完全没问题

---

其次，我建议使用另一个库来选择和操作页面上的元素，而不是使用

文档。querySelector（）

等是一个很好的开始。有一个良好的界面，以及提供了更多的功能

您完全正确，使用

class

es比使用重复的

id

更好。但是我看不出使用像

document.querySelector

这样的函数代替jQuery有什么错。我知道jQuery曾经是避免跨浏览器不兼容的必要工具，但我认为现在已经基本解决了这些问题。而且一个没有库的页面下载的时间会稍微少一些。你能详细说明一下为什么推荐一个库吗？下载速度也提高了，因此获得额外脚本的成本对于许多应用程序来说并不是致命的。这样做的好处是您必须编写更少的代码，并且您的代码对于其他人来说更容易阅读，这对于提高生产率非常重要。但是，如果页面加载上的几毫秒延迟是一个破坏交易的因素，那么一定要排除外部依赖项。这完全取决于你的处境。没有一个正确的解决方案。