Javascriptまたはjqueryを使用した多言語ページ

Question

現在、私はいくつかの言語をサポートするWebアプリケーションに取り組んでいます。そのため、データベースには翻訳テーブルを用意しました。しかし、私はどのように翻訳をWebアプリケーションに取り込むか分からない。最も簡単な方法は、私の意見では、ページの各要素に適切な翻訳を行うことです。これはPHPでうまくいくはずですが、jsやJQueryで動作させる方法がわかりません。

私は何がしたいことは、このようなdiv要素の配列へのリファレンスです：

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

div要素がtranslation_arrayから値を「取る」だろうが、私はそれを行うための知識が不足しているように。このように動作させることは可能ですか？

もしそうでなければ、私はjsで多言語ウェブを作る方法に関するアドバイスをいただきたいと思います。

おかげで、あなたがHTMLのすべての部分（デフォルトでdisplay:blockを持ってdivかpに反して）にインラインで埋め込むことができるので、言語にspan HTMLタグを応じて変更するテキストのすべての部分に

Answer 1

使用。各spanために、例えば、名前が特定のパターンで始まるclassを使用：に従ってjQueryの機能.each変更クラス名にパターンlangに一致するすべてのspanタグを使用して

次いで<span class="lang-text1"></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>