一键切换显示隐藏多个div

Question

我正在尝试通过一个按钮切换多个 div 与相同的 class。目前，只有第一个 div 正在做这项工作，其余的都被忽略了。我试图将 .getElementById 更改为 .getElementsByClassName 但它也没有成功。你能帮忙吗？这是我的代码。我从 2 天开始尝试。 :/

按钮代码：

<input onclick="change();myFunction()" type="button" value="Zeige Features" id="myButton1"></input>

单击“隐藏”/“显示”时更改按钮文本的代码（德语）：

<script>function change() // no ';' here
{
    var elem = document.getElementById("myButton1");
    if (elem.value=="Zeige Features") elem.value = "Verstecke Features";
    else elem.value = "Zeige Features";
}</script>

问题应该出在这里。这是切换 div 的代码，但只有第一个 div 会这样做：

<script>function myFunction() {
  var x = document.getElementById("toggle-div");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
} </script>

希望你能帮助我，谢谢！

Answer 1

这里有几个问题。首先，您应该通过 class 获取您的元素：

 document.getElementsByClassName("name-of-toggle-divs-class");

这将 return 一个 HTMLCollection，因此您想将其转换为一个数组，如下所示：

Array.from(document.getElementsByClassName("name-of-toggle-divs-class"));

然后将样式更改应用于所有元素。正在恢复：

function myFunction(){
 const divArray = Array.from(document.getElementsByClassName("name-of-toggle-divs-class"));
 //Detecting the style you're going to use
 const displayStyle = divArray[0].display.style === 'block' ? 'none' : 'block';
 divArray.forEach(div => {
    div.style.display = displayStyle;
});

您应该使用 class 标识符，因为 id 会提示您只有一件商品。如果您有问题，请告诉我。

您也可以考虑将 class 从您定义 class 的项目中切换为：

 .div-of-toggle-divs-class{
   //some attributes
   display: block;
   &.invisible{
       display: none;
   }
  }

要做到这一点，只需遵循与上述相同的过程，并在 divArray 元素上使用 toggleClass 方法。试试这个：

<head>
     <style>
       .myClass {
             border: 1px solid black;
             margin-top: 2px;
             width: 100%;
        }
      </style>
      <script>
            function myFunction(){
            const divArray = 
            Array.from(document.getElementsByClassName("myClass"));
           //Detecting the style you're going to use
           const displayStyle = divArray[0].display.style === 'block' ? 'none' : 'block';
          divArray.forEach(div => {
          div.style.display = displayStyle;
         }); 
      </script>
</head>
<body>
        <div class="myClass"></div>
        <div class="myClass"></div>
        <div class="myClass"></div>
        <button type="button" onclik="myFunction()">CLICK ME</button>
</body>

Answer 2

删除 onclick 中的分号并添加 space.

//New code
<input onclick="change() myFunction()" type="button" value="Zeige Features" id="myButton1"></input>

Button 的文本在点击时很容易改变。

<script>
function change()
{
var elem = document.getElementById("myButton1"); 

    if (elem.value=="Zeige Features") elem.value = "Verstecke Features";
    else elem.value = "Zeige Features";

}//function closed
</script>

使用getElementsByClass，会给出一个数组，所以遍历数组，把每个div的样式一个一个改一下

<script>
function myFunction() 
{
  var x = document.getElementsByClass("toggle-div");

for( var i=0;i<x.length;i++)
{
  if (x[i].style.display === "block") {
    x[i].style.display = "none";
  } else {
    x[i].style.display = "block";
  }
}
} 
</script>

您也可以使用 for 以外的任何循环，或者您可以使用 map()

Answer 3

好的，

这很让人头疼，但我认为通过大量解决方法我解决了它。这就是我想要实现的目标。具有三个按钮和三个 div。当我单击一个按钮时，所有三个 div 都消失了，所有三个按钮都将文本更改为“隐藏”。再次点击时，反之。我希望这对那里的每个人都有帮助。我认为在 css 中触发所有“类”要容易得多。这是我在 java 脚本中的第一步，对我来说它和中文一样难（不要说 :)）。

// Toggle all buttons texts

function change() {
  var x = document.querySelectorAll("#button");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].value == "Zeige Features") {
      x[i].value = "Verstecke Features";
    } else {
      x[i].value = "Zeige Features";
    }
  }
}

// Toggle show and hide divs

function showhide() {
  var x = document.querySelectorAll("#toggle-div");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].style.display === "block") {
      x[i].style.display = "none";
    } else {
      x[i].style.display =
        "block";
    }
  }
}

<!--Inserting 3 buttons-->

<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>

<!--Inserting 3 divs-->

<div id="toggle-div"> div 1 </div>
<div id="toggle-div"> div 2 </div>
<div id="toggle-div"> div 3 </div>

谢谢@pikachu_on_acid。你的方法是正确的，但我仍然有问题。不要怀疑当你想隐藏 div 时是否必须在开始时单击两次。在我的站点中，它们首先被隐藏，因此它们看起来像拳头。如果要反转，只需将 java 代码中的值从 "block" "none" "block" 更改为 "none" "block" "none" .

感谢您的帮助和问候！

一键切换显示隐藏多个div

Toggle show hide for multiple divs with one button

html

java

button

toggle