时间戳

首页 > 解决方案 > 在页面上选择所有 getElementsByClassName 而不指定 [0] 等

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

问题描述

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

我已经让它工作了，但我确信必须有更好的方法来实现类似的结果。我希望能够选择页面上的所有显示隐藏类，而无需为每次指定数字（[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";
  }
}

标签： javascriptgetelementsbyclassname

解决方案

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

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

推荐阅读