更改 HTML 頁面語言

Question

我想制作一個英文頁面，該頁面有一個可以將語言更改為德語的按鈕。 我已經閱讀了數千篇關於這個主題的文章，但我沒有得到答案。 我確定我不想使用 Google Translator API 或任何 API 來實現。 我想用純JS來做。 我只想問你是怎么做到的？ 使用一個按鈕，它有很多行，可以一一更改元素的文本： function changeLang () { document.getElementById('someid').innerHTML = "some German text"; ... } 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（加載頁面時的延遲）。