我正在建设一个网站，并加入双语功能。在研究了几个选项后，我选择了使用显示/隐藏方法，因为我了解到这对于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 正确地收集每种语言的数组并交换活动/非活动类。我觉得我正在忽视一些显而易见的东西，但是我没有看到它。我已经尝试过在
lang-active 类上使用 display: inherit。此外，单击按钮时按钮中的文本不会更改。
正如提到的那样，当我使用段落 <p> 的测试文件时，它全部工作。//ETA: 已解决按钮文本问题：需要更改其值而不是其 textContent。
item.classList.add('lang-inactive'); } } function showObject(item) { if(item.classList.contains('lang-inactive')) { item.classList.remove('lang-inactive'); } item.classList.add('lang-active'); }` can be written `function toggle(item) { item.classList.toggle("lang-inactive")}`- mplungjan