使用Javascript或jquery的多语言页面

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

我想要的是在div中对数组的引用,如下所示：

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

因此div会从translation_array中“获取”值,但我缺乏这样做的知识.是否有可能以这种方式工作？

如果没有,我会很感激有关如何在js中制作多语言网页的建议.

谢谢

解决方法:

根据span HTML标记的语言,使用你要更改的每一段文本,因为你可以在每一段HTML上嵌入内联(与div或p相反,它们有一个display：block默认情况下).然后,对于每个跨度,使用名称以特定模式开头的类,例如：

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

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

我还在这里给你一个简单的例子来检查.

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,multilingual
来源： https://codeday.me/bug/20191008/1874602.html