javascript - Button js 不适用于任何类，但 Id 可以

Question

这个问题已经有答案了:

奥 git _a (5 个回答)

已关闭 4 年前。

我希望我的所有 div 类都有一些行为，但不知何故没有任何反应。当我使用 getElementById 时，它​​仅适用于第一个，我知道这一点，因为 div Id 是唯一的。但为什么现在它不适用于我的所有类(class)？

此外，我尝试使按钮文本随着打开和关闭而改变。我使用了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，你需要为你的情况使用索引，但你不知道索引，所以需要你 nextElementSibling 找到合适的 div。

解决方案:您可以将this传递给click事件并使用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>