用JS调用多个getElementsByClassName()

Question

我现在很困惑如何让我的 JS 处理多个类元素。目前在代码中它只是更改显示：它找不到第一个 div。我已经阅读了一些教程，但到目前为止我无法将其实现到我的 js 中并使其正常工作。

有人能帮我解决这个问题吗？提前致谢！

function showHideEnglish() {

        var english = document.getElementsByClassName("text__english")[0]; 

  

        var german = document.getElementsByClassName("text__german")[0];

         german.style.display = "none";

        if(english.style.display == "block") {

                german.style.display = "none";             

          }

        else {

            english.style.display = "block";            

        }

    }

    function showHideGerman() {

        var english = document.getElementsByClassName("text__english")[0];

        var german = document.getElementsByClassName("text__german")[0];

        english.style.display = "none";

        if(german.style.display == "block") {

                 english.style.display = "none";

          }

        else {

             german.style.display = "block";

        }

    }

<button onclick="showHideEnglish();">English</button>

<button onclick="showHideGerman();">German</button>

<div class="text__english"style="display:block;">This text is English</div><br>

<div class="text__german" style="display:none;">dieser Text ist auf Deutsch</div><br>

<div class="text__english"style="display:block;">This text is English</div>

<div class="text__german" style="display:none;">dieser Text ist auf Deutsch</div>

Answer 1

无论页面上有多少元素，这都有效：function showHideEnglish() {&nbsp; &nbsp; &nbsp; &nbsp; var german = document.getElementsByClassName("text__german");&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < german.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; german[i].style.display = "none";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; var english = document.getElementsByClassName("text__english");&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < english.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; english[i].style.display = "block";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;function showHideGerman() {&nbsp; &nbsp; &nbsp; &nbsp; var german = document.getElementsByClassName("text__german");&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < german.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; german[i].style.display = "block";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; var english = document.getElementsByClassName("text__english");&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < english.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; english[i].style.display = "none";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; <button onclick="showHideEnglish();">English</button>&nbsp; &nbsp; <button onclick="showHideGerman();">German</button>&nbsp; &nbsp; <div class="text__english" style="display:block;">This text is English</div><br>&nbsp; &nbsp; <div class="text__german" style="display:none;">dieser Text ist auf Deutsch</div><br>&nbsp; &nbsp; <div class="text__english" style="display:block;">This text is English</div>&nbsp; &nbsp; <div class="text__german" style="display:none;">dieser Text ist auf Deutsch</div>