使用 Jquery/JavaScript 构建翻译器函数

use Jquery/JavaScript to build translator function?

本文关键字：翻译器 函数 构建 JavaScript Jquery 使用      更新时间：2023-09-26

我目前正在使用 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>

我整理了一个基本的例子。本质上，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>

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

尝试侦听 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/

相关文章：