Question

我希望所有div类都具有某些行为，但是不知何故什么也没有发生。当我使用getElementById时，它仅在第一个起作用，我知道这是因为div ID是唯一的。但是为什么现在它不能在我所有的课上都起作用？

此外，我尝试使按钮文本随打开和关闭而改变。我使用了button onclick="myFunction(this)"，还设置了button value="button text"，然后在我的JavaScript中使用了innerHTML，但是没有运气。如果您愿意，我可以展示出我尝试过的方法，那么，我尝试了多种方法，但是没有运气。


    function myFunction() {
      var x = document.getElementsByClassName("textbox");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }

和


    <button onclick="myFunction()" value="button text"></button>
    <div class="textbox"></div>
    <button onclick="myFunction()" value="button text"></button>
    <div class="textbox"></div>
    <button onclick="myFunction()" value="button text"></button>
    <div class="textbox"></div>
    <button onclick="myFunction()" value="button text"></button>
    <div class="textbox"></div>
    <button onclick="myFunction()" value="button text"></button>
    <div class="textbox"></div>
    <button onclick="myFunction()" value="button text"></button>
    <div class="textbox"></div>

Answer 1

由于getElementsByClassName("textbox")总是返回数组，因此无法将数组视为DOM，需要使用case索引，但是您不知道索引，因此需要nextElementSibling找到合适的div。

解决方案：您可以通过this来单击事件，并使用nextElementSibling来获取div

function myFunction(item) {

            var x = item.nextElementSibling;
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
}

function myFunction(item) {
//console.log(item.nextElementSibling);
            var x = item.nextElementSibling;
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
           }

<button onclick="myFunction(this)" value="button text">A</button>
                <div class="textbox">A</div>
<button onclick="myFunction(this)" value="button text">B</button>
                <div class="textbox">B</div>
<button onclick="myFunction(this)" value="button text">C</button>
                <div class="textbox">C</div>
<button onclick="myFunction(this)" value="button text">D</button>
                <div class="textbox">D</div>
<button onclick="myFunction(this)" value="button text">E</button>
                <div class="textbox">E</div>
<button onclick="myFunction(this)" value="button text">F</button>
                <div class="textbox">F</div>

Answer 2

尝试使用querySelectorAll，如下所示：

function myFunction() {
	var x = document.querySelectorAll(".textbox");
	x.forEach(ele=>{
		if (ele.style.display === "none") {
			ele.style.display = "block";
		} else {
			ele.style.display = "none";
		}
	}
	)
}

<button onclick="myFunction()" value="button text"></button>
                <div class="textbox"></div>
<button onclick="myFunction()" value="button text"></button>
                <div class="textbox"></div>
<button onclick="myFunction()" value="button text"></button>
                <div class="textbox"></div>
<button onclick="myFunction()" value="button text"></button>
                <div class="textbox"></div>
<button onclick="myFunction()" value="button text"></button>
                <div class="textbox"></div>
<button onclick="myFunction()" value="button text"></button>
                <div class="textbox"></div>

Button js不适用于任何类，但ID是

2 个答案: