javascript - 使用 Jquery/JavaScript 构建翻译功能？

Question

我目前正在使用 Dreamweaver，我正在尝试构建一个简单的翻译器功能。我有一个包含多个选项的下拉列表(每种语言都由专门的 id 指定)，我希望用户选择所选语言并翻译所选的 HTML 字符串。到目前为止，我已经尝试了所有方法，但我似乎无法让它发挥作用，我认为这是最简单的方法。任何想法或编辑都会有很大帮助。附:我是个初学者

JQuery:

$("#French").click(function(){
    $("#AppartmentB").replaceWith("maison");
});

HTML:

<select name="selectmenu" id="selectmenu">
    <option value="option1" id="English">English</option>
    <option value="option2" id="French">French</option>
</select>


<div data-role="page" id="AppartmentPage" class="page">
   <h1 class="TopText" align="center" id="AppartmentT">Appartment</h1>
   <h1 class="BotText" align="center" id="AppartmentB">Appartment</h1>
</div>

Answer 1

我整理了一个基本示例。本质上，JS 有一个翻译数据库。我只放入了一个带有 1 个键的项目，text。 JS 监听语言选择下拉菜单的任何更改。

这基本上就是许多本地化库的工作原理。查看jquery-localize如果您想实现更强大的功能。

// Translation database
var translations = {
  'en': {
    'text': 'Apartment'
  },
  'fr': {
    'text': 'Maison'
  }
}

// Li
$("#languageSelect").change(function() {
  var str = '';
  $("#languageSelect option:selected").each(function() {
    var langCode = $(this).val();
    str += translations[langCode]['text'];
  });
  $("#translatedText").text(str);
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="languageSelect">
  <option value="en" selected="selected">English</option>
  <option value="fr">French</option>
</select>

<div data-role="page" id="AppartmentPage" class="page">
  <h1 id="translatedText">Apartment</h1>
</div>