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

标签： javascripthtmltoggle

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>