更改 HTML 页面语言

Question

我想制作一个英文页面，该页面有一个可以将语言更改为德语的按钮。我已经阅读了数千篇关于这个主题的文章，但我没有得到答案。我确定我不想使用 Google Translator API 或任何 API 来实现。我想用纯JS来做。我只想问你是怎么做到的？使用一个按钮，该按钮有很多行，可以一一更改元素的文本： function changeLang () { document.getElementById('someid').innerHTML = "some German text"; ... }

或者使用const transLang { from = "en" to = "de" ...} 来实现？ 如果您知道如何启动它，请告诉我。

Answer 1

对于“纯 JS”解决方案，换句话说，没有任何常见的解决方案：

• 没有 Ajax 来获取翻译后的页面文本/替换 html
• 不重定向到可以处理布局不一致的其他页面

一种选择是将翻译存储在每个 div 上并使用.text() 切换它们。不要将您的翻译编码到您的 javascript 中，因为这很快就会变得无法维护。

function switchLang(lang)
{
    $("[data-" + lang + "]").text(function(i, e) {
        return $(this).data(lang);
    });
}

switchLang("en");

$(".switchlang").click(function() {
    // change the button caption here, eg a flag
    // UX opinion of whether it should be what it is 
    // or what it will become
    // ie "de" click to make it "de"
    // or "de" it's currently "de", click to change it
    $(this).text($(this).data("lang"));
    
    // switch to other language based on language on the button
    var lang = $(this).data("lang") == "de" ? "en" : "de";
    $(this).data("lang", lang);
    switchLang(lang)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span data-de="Um die Nachrichten zu lesen" 
      data-en="To read the news"></span>,&nbsp;
<span data-de="Übersetzungsdienst nicht verfügbar" 
      data-en="click here"></span>
<hr/>
<div data-en="no de translation for this line"></div>
<hr/>
<button class='switchlang' data-lang="en">de</button>

然后您可以轻松添加新语言而无需更改任何代码（这次使用单独的按钮）

var defaultlang = "en";

function switchLang(lang)
{
    $("[data-" + lang + "]").text(function(i, e) {
        return $(this).data(lang);
    });
}

switchLang("en");

$(".switchlang").click(function() {
    switchLang($(this).data("lang"))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span data-de="Um die Nachrichten zu lesen" 
      data-es="Para leer las noticias"
      data-en="To read the news"></span>,&nbsp;
<span data-de="Übersetzungsdienst nicht verfügbar" 
      data-es="haga clic aquí"
      data-en="click here"></span>
<hr/>
<div data-es="no hay traducción para esta línea"
     data-en="no de translation for this line"></div>
<hr/>
<button class='switchlang' data-lang="en">en</button>
<button class='switchlang' data-lang="de">de</button>
<button class='switchlang' data-lang="es">es</button>

---

您可能更喜欢直接在 HTML 中默认语言，而不是在启动时，例如：

<span data-de="speichern">save</span>

然后在加载时将原件存储在.data("en") 中。这将消除可能对您的场景很重要的 FOUC（加载页面时的延迟）。