Java 使用一个按钮切换多个div的显示隐藏_Java_Html_Button_Toggle

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

java html button

Java 使用一个按钮切换多个div的显示隐藏,java,html,button,toggle,Java,Html,Button,Toggle,我试图通过一个按钮切换同一类的多个div。目前，只有第一个div在做这项工作，其余的都被忽略了。我试图将.getElementById更改为.getElementsByCassName，但它也没有起作用。你能帮忙吗？这是我的密码。我已经试了两天了/ 按钮代码：这里有几个问题。首先，您应该按类获取元素，因为它： document.getElementsByClassName("name-of-toggle-divs-class"); 这将返回一个HTMLCollect

我试图通过一个按钮切换同一类的多个div。目前，只有第一个div在做这项工作，其余的都被忽略了。我试图将.getElementById更改为.getElementsByCassName，但它也没有起作用。你能帮忙吗？这是我的密码。我已经试了两天了/

按钮代码：

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

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

您应该使用类标识符，因为和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>


.myClass{
边框：1px纯黑；
边缘顶部：2倍；
宽度：100%；
}
函数myFunction（）{
常量divArray=
from（document.getElementsByClassName（“myClass”）；
//检测您将要使用的样式
const displayStyle=divArray[0]。display.style=='block'？'none'：'block'；
divArray.forEach（div=>{
div.style.display=显示样式；
}); 
点击我

从单击的

中删除分号并添加空格
//New code
<input onclick="change() myFunction()" type="button" value="Zeige Features" id="myButton1"></input>

您也可以使用除

之外的任何循环，也可以使用map（）好的

这是一个令人头疼的问题，但我认为通过大量的解决办法，我解决了它。这是我想要实现的。有三个按钮和三个div。当我单击一个按钮时，所有三个div消失，所有三个按钮都将文本更改为“隐藏”。当再次单击时，反之亦然。我希望这能帮助所有人。我想触发所有“类”这是我使用javascript的第一步，对我来说就像中文一样难（不要说：）

//切换所有按钮文本
函数更改（）{
var x=document.queryselectoral（“按钮”）；
var i；
对于（i=0；i



第一组
第2组
div 3嘿，我不太确定你是否在解决我的问题。也许你认为我会修复按钮文本的切换，但这是有效的！我无法解决用一个按钮切换所有div的问题…仍然是thx。抱歉，什么都没有发生。将其粘贴为1。你找到解决问题的方法了吗？如果没有，请告诉我你想在点击按钮的同时隐藏/显示所有的div？我给了你一个函数的解决方案，等等，我会为两个函数都写。那么我必须为每个div添加不同的类名吗？没有可能避免吗？所有的div都有相同的类…我想我可以从id改为cl让代码同时适用于所有div。或者你说的：（“toggle divs class的名称”）是什么意思？我想我对这些代码了解不够？（不，你可以，而且你应该，对每个div使用相同的类名！“toggle divs class的名称”是您将要添加到该div中的类的名称，例如抱歉，但是当我使用您的代码时，没有发生任何事情。我确信我做错了什么。这就是我所做的。我像往常一样有我的按钮：1。）2。）我将您的所有代码一个接一个地添加到一个html文件中（您给我的每个代码块都在一个html文件中）在与的网站中。我将类名更改为“切换divs类的名称”，但什么也没有发生。我想我永远不会解决这个问题。我在发布之前使用了它。我将用我的代码向您发送pm。我不知道如何发送pm，我将用它发布另一个答案
<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>

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