用一个按钮切换多个div的显示和隐藏

提问者：小点点

用一个按钮切换多个div的显示和隐藏

我正在尝试通过一个按钮切换多个div与相同的类。目前，只有第一个div在执行任务，其余的都被忽略了。我尝试将.getElementById更改为.getElementsByClassName，但它也没有起到这个作用。你能帮忙吗？这是我的代码。我从两天起就开始尝试了。：/

按钮代码：

null

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

null

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

null

<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>

null

问题也许就在这里。这是切换div的代码，但只有第一个div可以切换：

null

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

null

希望你能帮助我，谢谢！

共2个答案

匿名用户

从onclick中删除分号并添加空格。

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

按钮的文本将很容易改变onclick。

<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()

匿名用户

这里有几个问题。首先，您应该按类获取元素：

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

这将返回一个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 identifier，因为和id会建议您只有一个项目。如果你有问题就告诉我。

您还可以将类从定义类的项中切换为：

 .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>