Question

我正在尝试创建一个功能作为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";
  }
}

Answer 1

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

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

Answer 2

如注释中所述，您正在寻找循环：

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）转换为数组。

Answer 3

您可以从HTML集合中创建一个数组，只需使用map即可：

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";
    }
  })

};

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

3 个答案: