使用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>