Javascript 选择页面上的所有getElementsByClassName，但不指定[0]等

我试图创建一个函数作为WordPress站点的一部分，以显示/隐藏具有特定类的页面元素。例如，使用“显示隐藏”类的任何页面元素（行、容器、文本块等）都应通过单击按钮隐藏/显示

我已经让它工作了，但我相信一定有更好的方法来达到类似的效果。我希望能够选择页面上的所有显示隐藏类，而无需为每次使用该类时指定数字（[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";
  }
}

---

如评论中所述，您正在寻找循环：

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

  [...x].forEach(xx => {
    if (xx.style.display === "none") {
      xx.style.display = "block";
    } else {
      xx.style.display = "none";
    }
  });
}

---

请注意

[…x]

扩展运算符，它将一个可写入（

HTMLCollection

在本例中）转换为一个数组。

您可以从HTML集合创建一个数组，只需使用映射：

function myFunction() {

  Array.from(document.getElementsByClassName("show-hide")).map(function(elem){
    if (elem.style.display === "none") { 
      elem.style.display = "block" 
    } else {
      elem.style.display = "none";
    }
  })

};

---

如上所述，您可以使用循环。 这里有一个速记：

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

---

您应该使用一个循环，例如

for

，

forEach（）

或

map（）

谢谢您，这个循环对我很有用，而且在我对javascript的知识非常有限的情况下也最有意义。