带有 Javascript 或 jquery 的多语言页面

Question

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

我想要的是像这样在 div 中对数组的引用：

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

这样 div 就会从 translation_array 中“获取”值，但我缺乏这样做的知识。有可能让它以这种方式工作吗？

如果没有，我将不胜感激有关如何在 js 中制作多语言网络的建议。

谢谢

Answer 1

在您想要根据语言更改的每段文本上使用spanHTML 标记，因为您可以在每段 HTML 中嵌入内联（与默认情况下相反div或p具有display:block）。然后对于每个span使用以class特定模式开头的名称，例如：

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

然后使用 jQuery 的函数根据所选语言.each更改与其类名span中的模式匹配的每个标签lang。

我还在这里放了一个简单的例子供您检查。

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>