使用Javascript选择选项时更改标签的文本

时间:2017-09-10 23:22:10

标签: javascript html

我想使用Javascript在我的小网站上进行翻译。 我想用它的ID或smth来改变标签内容。我不知道该怎么做,但我知道它是如何工作的...... 我想用字符串创建文件&每个langauge的翻译。

所以,有一个选择标签有谁选择......

    <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"

en.js

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

我搜索了我需要的东西,但无法找到。

希望你能帮助我:)谢谢。

1 个答案:

答案 0 :(得分:0)

这是一个非常简单的示例,说明如何使用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>