根据语言替换html元素的内容

Question

我是一个软件开发人员，因此需要在同一个网页上创建各种语言版本。

当我有这样的HTML元素时：

<button id="btn1" >My Button</button>

当语言设置为“ fr”而不是“ en”时，最简单的自动更改文本（Javascript或JQ？）的方法是什么？

文本将变为“ Mon Bouton”，如果以后要添加德语翻译，则需要保持简单。

我想我可以使用一组词典，每种语言使用一个？ 然后在加载时执行js或jq函数...或每次用户更改当前语言选项时执行。

然后，“ en”字典将如下所示：

{"addButton" : "Add"}
{"DeleteButton" : "Delete"}

等等...

但是我将如何进行更改？

Answer 1

您可以定义（或从服务器生成）转换，如下所示：

 translations = { 'en': { 'button_text': 'My Button' }, 'fr': { 'button_text': 'Mon Bouton' } }; 

例如，您有一些可以更改语言的按钮：

 <button data-language="en">English</button> <button data-language="fr">French</button> 

因此，您可以绑定click事件，它将更改如下语言：

 $('button[data-language]').click(function(e) { var lang = $(this).attr('data-language'); $('button#btn1').text(translations[lang]['button_text']); }); 

如果要添加其他语言，则只需添加翻译和按钮，而无需更改js代码

Answer 2

挺有趣的，

我没试过

但是我这样做：

http://jsfiddle.net/3ox8a24e/

---

HTML：

EN<input type="radio" name="group" id="en" checked />
FR<input type="radio" name="group" id="fr" />
<hr />
<div class="content">
    <button data-en="My Button" data-fr="Mon Bouton"></button>
    <div data-en="something" data-fr="quelque chose"></div>
</div>

---

JS：

$(":radio").on("click", function(){
/* I used two radios: #en, #fr (check in html code) */

    var lang = this.id;
    /* lang will take the id of the clicked radio ("en" or "fr") */

    $(".content *").each(function(){
        $(this).html( $(this).data(lang) );
        /* then set the $.html() with the $.data() - functions of jquery */
    });
});

$("#en").trigger("click");
/* starts with english language */

---

查看jquery的功能：

$的.html（）;

$。数据（）;