语言选择器

时间:2019-03-09 21:39:40

标签: javascript jquery html

我一直在研究代码,这些代码可以让我单击<a>标签以使用键值对将页面的语言转换为另一种语言,但是我发现了无数的在线代码似乎是针对自己的个人需求或不完整的。

所以我的问题是,在使用字典密钥对时,如何将具有特定类的每个元素从单击的<a>标签更改为语言?

这是我当前的JQuery / JS代码:

var langcodes = [{
  code: "en",
  name: "English",
}, {
  code: "zh-Hant",
  name: "Traditional",
}, {
  code: "zh-Hans",
  name: "Simplified",
}, {
  code: "vi",
  name: "Vietnamese",
}];

var dictionary = [{
    //Word one
    English: "Abby",
    Traditional: "AbbyT",
    Simplified: "AbbyS",
    Vietnamese: "AbbyV",
  }, {
    //Word two
    English: "Babby",
    Traditional: "BabbyT",
    Simplified: "BabbyS",
    Vietnamese: "BabbyV",
  },
  //and so on and so forth
];

$(document).ready(function() {
  $(".langtype").click(function() { //click an element(language) w/ class langtype
    $(".trans").each(function(key, item) {
      //for each element with the trans class, change its text to be fitting of .langtype's language
    });
  });
})
<div class="navitem languagediv">
  <a>LANGUAGE&nbsp; <i class="fa fa-caret-down"></i></a>
  <div class="dropdown-content">
    <a class="dropitem langtype">ENGLISH</a>
    <a class="dropitem langtype" href="#">繁体中文</a>
    <a class="dropitem langtype" href="#">简体中文</a>
    <a class="dropitem langtype" href="#">Tiếng Việt</a>
  </div>
</div>

我非常感谢我可以获得的所有帮助或代码模板。谢谢!

2 个答案:

答案 0 :(得分:0)

我最近使用了这个库: http://www.openxrest.com/translatejs/ 完成类似的任务,根据用户反馈,我将网站的某些部分转换为另一种语言。

尝试一下。他们还提供了与jQuery结合使用的示例。

答案 1 :(得分:0)

一种方法是给词典中的每个单词或短语一个键,然后将该键放在要翻译的每个div上。还要在您的语言选择器上添加一个属性,指示正在选择的语言。在您的https://example.com循环中,阅读each(如果您使用“键”来设置键),然后在词典中查找新单词。这是一个基本的工作示例:https://jsfiddle.net/nghjucLs/

我不会尝试逐个单词地翻译(通过扫描每个$(this).attr('key')元素中的单词,然后在字典中搜索它);如果字典更大,页面上要翻译的文字更多,则可能会变得非常慢。