用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() {

        var german = document.getElementsByClassName("text__german");

        for (var i = 0; i < german.length; i++) {

            german[i].style.display = "none";

        }

        var english = document.getElementsByClassName("text__english"); 

        for (var i = 0; i < english.length; i++) {

            english[i].style.display = "block";            

        }

     }

    

     function showHideGerman() {

        var german = document.getElementsByClassName("text__german");

        for (var i = 0; i < german.length; i++) {

            german[i].style.display = "block";

        }

        var english = document.getElementsByClassName("text__english"); 

        for (var i = 0; i < english.length; i++) {

            english[i].style.display = "none";            

        }

     }

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