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

Question

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

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>

Answer 2

您正在替换整个匹配的标签而不是其内容，并且您无法在选择选项上收听点击事件。

尝试监听您的 select 元素的 change 事件，并将语言用作选项值。

HTML：

<select name="selectmenu" id="selectmenu">
  <option value="english">English</option>
  <option value="french">French</option>
</select>

JS：

$("#selectmenu").on('change', function() {
  var chosenLanguage = $(this).val();
  switch (chosenLanguage) {
    case 'french':
      $('#AppartmentB').text('Maison');
      break;
    case 'english':
      $('#AppartmentB').text('Appartment');
      break;
  }
});

在此处查看完整的工作示例：https://jsfiddle.net/r76hLLte/