Question

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

当我有这样的HTML元素时：

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

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

然后该文本将成为＆＃34; Mon Bouton＆＃34;如果以后我想添加德语翻译，我需要保持简单。

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

＆＃34; en＆＃34; dictionnary看起来像这样：

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

等等......

但我将如何进行改变？

Answer 1

您可以定义（或从服务器生成）这样的翻译：

＆＃13;

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

＆＃13;

例如，你有一些改变语言的按钮：

＆＃13;

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

＆＃13;

所以你可以绑定click事件，它会改变这样的语言：

＆＃13;

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

＆＃13;

如果你想添加其他语言，你只需要添加翻译和按钮，你就不需要改变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();

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

2 个答案: