根據語言取代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();