Javascript：根据类显示/隐藏元素

Question

我正在构建的网站上包含双语功能。研究我已经使用显示/隐藏方法的选项，因为我知道与切换字符串相比，这对 SEO 更好。由于我还在学习，我现在也想坚持使用 javascript。我已经阅读了 StackOverflow 中的几篇文章，但到目前为止还没有找到解决方案。

下面的方法适用于我创建的一个简单的测试文件，但是一旦我尝试在网站上实现它，它就会显示两种语言onload以及单击按钮时的语言。我现在只处理菜单和页面的标题——也许我需要处理这些更具体的元素？

我的 HTML

(…)
<ul id="navlinks">
   <li><a href="index.html">Home</a></li>
   <li class="lang-de"><a href="angebot.html">Angebot</a></li>
   <li class="lang-eng"><a href="angebot.html" class="thispage">Services</a></li>
   <li class="lang-de"><a href="wer_wir_sind.html" class="thispage">Über Uns</a></li>
   <li class="lang-eng"><a href="wer_wir_sind.html">About Us</a></li>
   <li class="thispage lang-de"><a href="beispiele.html">Beispiele</a></li>
   <li class="thispage lang-eng"><a href="beispiele.html">Beispiele</a></li>
   <li class="lang-de"><a href="rezensionen.html">Rezensionen</a></li>
   <li class="lang-eng"><a href="rezensionen.html">Reviews</a></li>
   <li class="lang-de"><a href="contact.php">Kontakt</a></li>
   <li class="lang-eng"><a href="contact.php">Contact</a></li>
</ul>
(…)
<input type="button" value="Display Page in English" id="translate">
(…)
<script type="text/javascript" src="js/translate.js"></script>

我的 JavaScript

var trans_button = document.getElementById("translate");
        var de = document.querySelectorAll(".lang-de"); //get all German text blocks
        var eng = document.querySelectorAll(".lang-eng"); // get all English text blocks
        var aufDeutsch = true;

//figure out which language should be visible
function translate() {
    if (aufDeutsch) {
        de.forEach(showObject);
        eng.forEach(hideObject);
        trans_button.textContent = "Display Page in English";
        aufDeutsch = false;
    } else {
        de.forEach(hideObject);
        eng.forEach(showObject);
        trans_button.textContent = "Diese Seite auf Deutsch zeigen";//SOLUTION: Change *TextContent* to *value*
        aufDeutsch = true;
    }
    console.log(de.length, eng.length, aufDeutsch);
    
}
        //hide the object
        function hideObject(item) {
            if(item.classList.contains('lang-active')) {
                item.classList.remove('lang-active'); 
            
            item.classList.add('lang-inactive');
            }
        }
        
        //shoe the object
        function showObject(item) {
            if(item.classList.contains('lang-inactive')) {
               item.classList.remove('lang-inactive'); 
            }
            item.classList.add('lang-active');
        }
        
        window.onload = translate; //set the correct language as the page loads
        trans_button.addEventListener("click", translate, false); //click listener to make the changes

我的 CSS

(…)
lang-active {
    display: block;
}
lang-inactive {
    display: none;
}
(…)

我已经通过浏览器（Safari）进行了调试。Javascript 正在正确收集每种语言的数组并交换活动/非活动类。我觉得我忽略了一些明显的东西，但我只是没有看到它。我已经尝试display: inherit在lang-active课堂上使用。此外，单击时按钮中的文本不会改变。如前所述，当我使用测试文件（使用段落<p>）执行此操作时，一切正常。

//ETA：解决了按钮文本问题：我需要更改它的值而不是它的 textContent。

Answer 1

只需删除and函数if内的条件即可。hideObjectshowObject

\n

\r\n

\r\n

 var trans_button = document.getElementById("translate");\n        var de = document.querySelectorAll(".lang-de"); //get all German text blocks\n        var eng = document.querySelectorAll(".lang-eng"); // get all English text blocks\n        var aufDeutsch = true;\n\n//figure out which language should be visible\nfunction translate() {\n    if (aufDeutsch) {\n        de.forEach(showObject);\n        eng.forEach(hideObject);\n        trans_button.textContent = "Display Page in English";\n        aufDeutsch = false;\n    } else {\n        de.forEach(hideObject);\n        eng.forEach(showObject);\n        trans_button.textContent = "Diese Seite auf Deutsch zeigen";\n        aufDeutsch = true;\n    }\n    \n}\n        //hide the object\n        function hideObject(item) {\n            item.classList.remove(\'lang-active\'); \n            item.classList.add(\'lang-inactive\');\n        }\n        \n        //shoe the object\n        function showObject(item) {\n               item.classList.remove(\'lang-inactive\'); \n               item.classList.add(\'lang-active\');\n               }\n        \n        window.onload = translate; //set the correct language as the page loads\n        trans_button.addEventListener("click", translate, false); 

\r\n

.lang-active {\n    display: block;\n}\n.lang-inactive {\n    display: none;\n}

\r\n

<ul id="navlinks">\n   <il><a href="index.html">Home</a></il>\n   <il class="lang-de"><a href="angebot.html">Angebot</a></il>\n   <il class="lang-eng"><a href="angebot.html" class="thispage">Services</a></il>\n   <il class="lang-de"><a href="wer_wir_sind.html" class="thispage">\xc3\x9cber Uns</a></il>\n   <il class="lang-eng"><a href="wer_wir_sind.html">About Us</a></il>\n   <il class="thispage lang-de"><a href="beispiele.html">Beispiele</a></il>\n   <il class="thispage lang-eng"><a href="beispiele.html">Beispiele</a></il>\n   <il class="lang-de"><a href="rezensionen.html">Rezensionen</a></il>\n   <il class="lang-eng"><a href="rezensionen.html">Reviews</a></il>\n   <il class="lang-de"><a href="contact.php">Kontakt</a></il>\n   <il class="lang-eng"><a href="contact.php">Contact</a></il>\n</ul>\n<button id="translate">Translate</button>

\r\n

\r\n

\r\n

\n