2016年11月23日:
我非常接近解决方案。 Rory McCrossan已经为我解决了这个问题,所以我接受了他的回答。 但是我更改了代码以加快开发速度。我想分享这个,以便你可以使用它。
JSON langfile-v1.0.json
{
"nl": {
"text1":"Hallo Wereld!",
"text2":"voorbeeld.com",
"text3":"Ik hou van Stack Overflow"
},
"en":{
"text1":"Hello World!",
"text2":"example.com",
"text3":"I love Stack Overflow"
}
}
Javascript / jQuery script.js
//Creating an GLOBAL object
var languageObject;
//Get the language json file
$.get("langfile-v1.0.json", function(response){
languageObject = response; //Assign the response to the GLOBAL object
setLanguage(); //Calling the setLanguage() function
});
//Call this function to set the language
function setLanguage() {
$("lang").html(function() {
var userLang = navigator.language || navigator.userLanguage;
var langSupported = false; //Check if the user language is supported
$.each(languageObject, function(key) {
if (userLang == key) {
langSupported = true;
}
});
if (langSupported) {
//Users language is supported, use that language
return languageObject[userLang][$(this).html()];
} else {
//User language is NOT supported, use default language
return languageObject.en[$(this).html()];
}
});
}
HTML page.html
<lang>text1</lang> <br>
<lang>text2</lang> <br>
<lang>text3</lang>
你可以检查它在JSFiddle上是如何工作的(代码略有不同,因为我不知道如何包含 langfile-v1.0.json 文件)
我想使用字符串搜索对象。
JSON
{
"nl": {
"lang":"Nederlands",
"header-WelcomeText":"Welkom op de website",
"header-Sub1":"Hoofdpaneel"
},
"en": {
"lang":"English",
"header-WelcomeText":"Welcome on the website",
"header-Sub1":"Dashboard"
}
}
使用Javascript / jQuery的
var output;
$.get("file.json", function(response){
output = response; //This is now a object in javascript
});
这一切都有效,这就是我想要的:
//The jQuery code
$('span .lang').text(output.nl.$(this).attr("data-lang"));
//The HTML code
<span class="lang" data-lang="header-Sub1"></span>
我知道这不起作用,但我知道有办法实现这一目标。
答案 0 :(得分:1)
要完成这项工作,您需要进行一些更改。
this
关键字引用该元素,您需要在其范围内运行代码。为此,您可以将函数传递给text()
方法,该方法从对象返回所需的值。 .lang
课程直接在span
上,因此您不应该在选择器中占用空间。 考虑到所有这些,这应该对你有用:
var output = {
"nl": {
"lang": "Nederlands",
"header-WelcomeText": "Welkom op de website",
"header-Sub1": "Hoofdpaneel"
},
"en": {
"lang": "English",
"header-WelcomeText": "Welcome on the website",
"header-Sub1": "Dashboard"
}
}
$('span.lang').text(function() {
return output.nl[$(this).data("lang")];
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="lang" data-lang="header-Sub1"></span>
&#13;