javascript - jQuery 使用字符串在对象中搜索

Question

更新

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 文件)

Click here for demo

---

旧问题帖:

我想使用字符串在对象中搜索。

示例:

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>

我知道这行不通，但我知道会有办法实现这一点。

Answer 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")];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="lang" data-lang="header-Sub1"></span>