使用Javascript或jquery的多语言页面 [英] Multi language page with Javascript or jquery

问题描述

目前我正在开发支持多种语言的网络应用。因此，我在我的数据库中准备了翻译表。但是，我不确定如何使用翻译填充Web应用程序。在我看来，最简单的方法是在页面的每个元素中引用适当的翻译。这在PHP中很有用我不知道如何使它在js或JQuery中工作。

Currently I am working on web app that will support several languages. Therefore I prepared table in my database with translations. However, I am not sure how to populate web app with translations. The easiest way, in my opinion, is to put reference to appropriate translation in each element of the page. This would work great in PHP I don't know how to make it work in js or JQuery.

我想要的是div中对数组的引用这个：

What I would like to have is the reference to array in divs like this:

    <div> {translation_array['login']} </div>

因此div会从translation_array获取值，但我缺乏知识。是否有可能以这种方式工作？

So that the div would "take" value from translation_array, but I lack the knowledge to do it. Is it possible to make it work this way?

如果没有，我将非常感谢有关如何在js中制作多语言网页的建议。

If not, I would appreciate advices on how to make multilanguage web in js.

谢谢

推荐答案

根据语言a <$ c使用您想要更改的每一段文字$ c> span HTML标记，因为您可以在每一段HTML上嵌入内联（与 div 或 p 默认显示 display：block 。然后对于每个 span 使用名称以特定模式开头的类，例如：

Use on every piece of text you want to change according to the language a span HTML tag because you can embed inline on every piece of HTML (contrary to div or p which have a display:block by default). Then for each span use a class with a name starting with a certain pattern, for example:

< span class =lang-text1>< / span>

然后使用jQuery的函数 .each 更改与模式 span 标记> lang 在其班级名称中，根据所选语言。

Then using jQuery's function .each change every span tag that matches the pattern lang in its class name, according to the selected language.

我在这里也提供了一个简单的例子供你检查。

I put also here a simple example for you to check.

var LanguageList = {
  "EN" : "English",
  "ES" : "Español",
  "PT" : "Português"
};

//languages Objects
var WORDS_EN = {
  "text1" : "text One",
  "text2" : "text Two"
};

var WORDS_ES = {
  "text1" : "texto Un",
  "text2" : "texto Dos"
};

var WORDS_PT = {
  "text1" : "texto Um",
  "text2" : "texto Dois"
};


window.onload = initialize;

function initialize() {

  var $dropdown = $("#country_select");    
  $.each(LanguageList, function(key, value) {
    $dropdown.
      append($("<option/>").
      val(key).
      text(value));
    });
    
  loadsLanguage("EN");
}

function loadsLanguage(lang){
  /*fills all the span tags with class=lang pattern*/ 
  $('span[class^="lang"]').each(function(){
    var LangVar = (this.className).replace('lang-','');
    var Text = window["WORDS_"+lang][LangVar];
    $(this).text(Text);        
  });
}

div{
  margin: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country_select" onchange="loadsLanguage(this.value);">
</select>

<div>
  <span class="lang-text1"></span>
</div>
<div>
  <span class="lang-text2"></span>
</div>
<div>
  <span class="lang-text2"></span>/<span class="lang-text2"></span>
</div>

这篇关于使用Javascript或jquery的多语言页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！