根据语言取代html元素的内容

Question

我是单个软件开发人员，我需要在同一个单独的网页中创建各种语言版本。

当我有这样的HTML元素：（？Javascript或JQ）

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

什么是自动更改其文本的最简单的方式，当语言设置为不是“EN”，“FR”？

该文本将成为“星期一布顿”，如果稍后我想添加德语翻译，我需要保持简单。

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

的“恩” dictionnary会再看看这样的：

{"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();

$.data();