javascript - 选择页面上的所有 getElementsByClassName 而不指定 [0] 等

Question

我正在尝试创建一个函数作为 WordPress 网站的一部分，以显示/隐藏具有特定类的页面元素。例如。任何使用“show-hide”类的页面元素(行、容器、文本 block 等)都应该通过单击按钮来隐藏/显示。

我已经成功了，但我确信必须有更好的方法来实现类似的结果。我希望能够选择页面上的所有显示隐藏类，而无需每次指定数字( [1], [2], [3], [3], [6]... )使用过。

我对 javascript 非常陌生，因此任何有关生成一系列值或使用通配符 * 符号来实现此目的的帮助或建议将不胜感激。

function myFunction() {
  var x = document.getElementsByClassName("show-hide");

  if (x[0].style.display === "none") {
    x[0].style.display = "block";
  } else {
    x[0].style.display = "none";
  }
  if (x[1].style.display === "none") {
    x[1].style.display = "block";
  } else {
    x[1].style.display = "none";
  }
  if (x[2].style.display === "none") {
    x[2].style.display = "block";
  } else {
    x[2].style.display = "none";
  }
  if (x[3].style.display === "none") {
    x[3].style.display = "block";
  } else {
    x[3].style.display = "none";
  }
}

Answer 1

如上所述，您可以使用循环。 这是一个简写:

for(let elem of Array.from(document.getElementsByClassName("show-hide"))) {
   elem.style.display = (elem.style.display === 'block') ? 'none' : 'block';
}