用一个按钮切换多个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个答案
这里有几个问题。首先，您应该按类获取元素：
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>
从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()
-
问题内容： 希望这是一个简单的问题。我有一个我想用按钮切换隐藏/显示 问题答案： 看一下jQuery Toggle HTML： jQuery的： 对于jQuery 1.7及更高版本
-
我正在尝试隐藏按钮div和显示一个隐藏的div后，一个表单按钮已经被点击，加上延迟提交/重定向。下面是我想出的办法，但似乎没有100%奏效。 null null 任何建议都非常感谢
-
问题内容： 我的html文件中有两个div。我想隐藏第一个div并在html输入按钮事件上显示另一个div 。 这是我的代码， 但这不起作用。任何帮助将不胜感激。 谢谢。 问题答案： 1）在onclick内，您不必使用暗示的“ javascript：”。 2）您检查“显示：阻止”，我总是检查“显示：无”（因为显示也可以是“行内阻止”，等等。） 尝试这个：
-
我想要一个像这样的Mp3播放器。我的搜索脚本显示每页10个结果。我想为每个搜索结果项插入一个mp3。 > 当我点击播放时，播放器正常打开，当我点击停止时，播放器正常停止，但是当我点击播放并在另一个结果上点击播放时，第一个没有停止，第二个打开正常... 当我点击“播放”时，我需要自动播放mp3；当我点击“停止”时，玩家必须停止。 HTML： 小提琴。
-
我是jQuery的新手，我试图在不使用jQuery的切换函数的情况下创建一个show/hide切换按钮，但我不知道下面的代码有什么问题。 “隐藏”按钮可成功隐藏段落。隐藏部分起作用了。它添加了一个类“show”，删除了类“hide”，并更改了按钮的文本。我使用Dev工具来查看这个部分，这个部分正在工作，但是再次点击按钮就不工作了，即show部分。 null null
-
我需要显示/隐藏div按钮根据导航-列表div高度溢出，如果列表是溢出然后显示按钮否则隐藏它。 jQuery HTML