使用Javascript選擇選項時更改標簽的文本

Question

我想使用Javascript在我的小型網站上進行翻譯。 我想通過它的ID或smth來更改標簽內容。 我不確定應該怎么做，但我有點理解它的工作原理...我想為每個語言創建帶有字符串和翻譯的文件。

因此，有一個選擇標簽，其中包含誰的選項...

    <select>
<option id="RU">Russian</option>
<option id="EN">English</option>
</select>

某些內容必須根據所選選項進行翻譯...

<div>
<span id="stringName">Your Name EN</span>: Viktor
<span id="stringPhone">Your Phone EN</span>: +7 900 00 00 00
<span id="stringEmail">Your E-mail EN</span>: the_great_russia@russia.ru
</div>

還有本地化文件，例如...

ru.js

stringName: "Your Name RU"
stringPhone: "Your Phone RU"
stringEmail: "Your E-mail RU"

zh.js

stringName: "Your Name EN"
stringPhone: "Your Phone EN"
stringEmail: "Your E-mail EN"

我已經搜索了需要的東西，但是找不到。

希望你能幫助我:)謝謝。

Answer 1

這是一個非常簡單的示例，說明如何使用select和包含您的語言字符串的一些全局對象上的change事件使此方法起作用。

對於您自己的網站，您可以將語言對象移至其自己的文件，並將其包含在頁面中

 var langRU = { stringName: "Your Name RU", stringPhone: "Your Phone RU", stringEmail: "Your E-mail RU" }; var langEN = { stringName: "Your Name EN", stringPhone: "Your Phone EN", stringEmail: "Your E-mail EN" }; function changeLang(lang) { document.querySelectorAll('[lang-change]').forEach(function(el) { el.innerText = window['lang'+lang][el.getAttribute('lang-change')]; }); } changeLang('EN'); 

 <select onchange="changeLang(this.value)"> <option value="RU">Russian</option> <option value="EN" selected>English</option> </select> <br><br><br> <div> <span lang-change="stringName">Your Name</span>: Viktor<br> <span lang-change="stringPhone">Your Phone</span>: +7 900 00 00 00<br> <span lang-change="stringEmail">Your E-mail</span>: the_great_russia@russia.ru<br> </div>