多个切换隐藏divs withought隐藏已隐藏

Question

我想用一些按钮切换一些div s的知名度。我有两个切换不同元素的按钮。目前，当您按下切换按钮时，它将隐藏div s，但当您按下第二个按钮时，它将切换其div s和其他共享相同类别/ ID的其他div的可见性（因此不会隐藏它们）。

实例（也a JSFiddle）：

document.querySelector(".a").addEventListener("click", myFunction); 
 
document.querySelector(".b").addEventListener("click", myFunction); 
 

 

 
function myFunction() { 
 
    let id = document.querySelectorAll(this.getAttribute('data-stuff')); 
 

 
    for (let i = 0, len = id.length; i < len; i++) { 
 

 
    console.log(id[i]); 
 
    if (id[i].style.visibility == "collapse") { 
 
     id[i].style.visibility = "visible"; 
 
    } else { 
 
     id[i].style.visibility = "collapse"; 
 
    } 
 
    } 
 
}

<div id="stuff1">hi</div> 
 
<div>hi</div> 
 
<div id="stuff2">hi</div> 
 
<div id="stuff1" class="stuff">hi</div> 
 
<div id="stuff1">hi</div> 
 
<div id="stuff1" class="stuff">hi</div> 
 
<div>hi</div> 
 

 
<input type="button" class="a" data-stuff="#stuff1" value="hide 1"><br> 
 
<input type="button" class="b" data-stuff=".stuff" value="hide 2">

我知道我要检查，如果div已经隐藏起来，如果第二个按钮被按下，但我不知道我会怎么做。我正想这样的事情，但它没有工作，我想要的方式：

let id = document.querySelectorAll(a); 
let btn = document.querySelector('.a2').value; 

for (let i = 0, len = id.length; i < len; i++) { 
    if (id[i].style.visibility == "collapse") { 
    if (id[i].style.visibility == "collapse" && /Show/i.test(btn)) { 
     id[i].style.visibility = "collapse"; 
    } 

    id[i].style.visibility = "visible"; 
    } else { 
    id[i].style.visibility = "collapse"; 
    } 
} 

Answer 1

你如何检查div已经隐藏是正确的直觉。有时你会被迫写一个看起来像一个简单函数的丑陋的if-else块。但看看你的代码，我还有其他一些可能有助于你的项目的评论。

首先，id属性应该对每个元素都是唯一的，即没有两个元素应该具有相同的id。没有任何关于强制执行此操作的html，但这只会导致问题。另一方面，元素被允许有多个class es。我建议一个stuff1类适用于所有div s受一个按钮影响和一个stuff2类适用于所有受其他受影响的div s。一些div可能会得到这两个类，这是完全没问题的。

其次，我建议使用另一个库来选择和操作页面上的元素，而不是使用document.querySelector()等。jQuery是一个开始的好地方。 D3也有良好的界面，并提供更多的功能！