javascript - 多个切换隐藏div而不取消隐藏已经隐藏的

Question

我正在尝试使用一些按钮切换某些 div 的可见性。我有两个按钮可以切换不同的元素。目前，当您按下切换按钮时，它将隐藏 div ，但当您按下第二个按钮时，它将切换其 div 和其他 的可见性>div共享相同的类/ID(从而取消隐藏它们)。

示例(也在 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 block 。但是查看您的代码，我有一些其他评论可能对您的项目有所帮助。

首先，id每个元素的属性应该是唯一的，即没有两个元素应该具有相同的 id 。 html 并没有强制执行这一点，但它只会导致问题。另一方面，元素允许有多个 class es.我建议 stuff1应用于所有 div 的类s 受一个按钮和 stuff2 的影响应用于所有 div 的类受到对方的影响。一些div s 可能会同时获得两门类(class)，这完全没问题。

其次，我建议使用另一个库来选择和操作页面上的元素，而不是使用 document.querySelector()等jQuery是一个很好的起点。 D3还有一个很好的界面，并提供了更多的功能!