2

所以目前我正在尝试创建一个可以在整个应用程序中重复使用的点击事件，

导航的基本流程是用户单击一个链接，单击该链接将获得一个 getJSON 请求，JSON 被解析并在子导航中返回，但是我要解决的问题是访问正确的JSON中的对象循环创建子导航，下面是我的代码。

$(".primary a").on("click", function(e){

    var type = "data."+$(this).data('type');

    if($(".secondary").hasClass("bounceInUp")) {
        $(".secondary").removeClass("bounceInUp").addClass("bounceOutDown");
    }

    $.getJSON("js/data.json", function(data){

        var items = [];

        $.each(data, function(key, val){
            items.push('<li><a href="" data-name="'+ val +'"><img src="img/wood-nav.jpg" /></a></li>');
        });

        console.log(items);
        $(".secondary ul").empty();
        $(".secondary ul").html(items);
        $(".secondary").removeClass("bounceOutDown").addClass("animated bounceInUp");

    });
    e.preventDefault();

});

我的 JSON 如下所示，

{
    "doors" : {
        "1" : "door 1",
        "2" : "door 2",
        "3" : "door 3",
        "4" : "door 4",
        "5" : "door 5",
        "6" : "door 6",
        "7" : "door 7",
        "8" : "door 8",
        "9" : "door 9",
        "10": "door 10"
    },

    "handles" : {
        "1" : "handle 1",
        "2" : "handle 2",
        "3" : "handle 3",
        "4" : "handle 4",
        "5" : "handle 5",
        "6" : "handle 6",
        "7" : "handle 7",
        "8" : "handle 8",
        "9" : "handle 9",
        "10": "handle 10"
    },

    "worktops" : {
        "1" : "worktop 1",
        "2" : "worktop 2",
        "3" : "worktop 3",
        "4" : "worktop 4",
        "5" : "worktop 5",
        "6" : "worktop 6",
        "7" : "worktop 7",
        "8" : "worktop 8",
        "9" : "worktop 9",
        "10": "worktop 10" 
    },

    "floors" : {
        "1" : "floor 1",
        "2" : "floor 2",
        "3" : "floor 3",
        "4" : "floor 4",
        "5" : "floor 5",
        "6" : "floor 6",
        "7" : "floor 7",
        "8" : "floor 8",
        "9" : "floor 9",
        "10": "floor 10" 
    },

    "walls" : {
        "1" : "wall 1",
        "2" : "wall 2",
        "3" : "wall 3",
        "4" : "wall 4",
        "5" : "wall 5",
        "6" : "wall 6",
        "7" : "wall 7",
        "8" : "wall 8",
        "9" : "wall 9",
        "10": "wall 10" 
    }

}

ai已经尝试过什么？我尝试在循环之外构造数据对象名称，然后将其传入，所以如果我点击门，例如var type然后将 = 到“门”，然后我将它连接到data.但是当循环通过时我得到了他的错误，

未捕获的类型错误：无法使用“in”运算符在 data.doors 中搜索“9”

似乎我无法通过点击进入我需要的对象，但一定有办法吗？

4

2 回答 2

0

我这样做是为了快速测试：

var temp = {
"doors": {
    "1": "door 1",
    "2": "door 2",
    "3": "door 3",
    "4": "door 4",
    "5": "door 5",
    "6": "door 6",
    "7": "door 7",
    "8": "door 8",
    "9": "door 9",
    "10": "door 10"
},
"handles": {
    "1": "handle 1",
    "2": "handle 2",
    "3": "handle 3",
    "4": "handle 4",
    "5": "handle 5",
    "6": "handle 6",
    "7": "handle 7",
    "8": "handle 8",
    "9": "handle 9",
    "10": "handle 10"
},
"worktops": {
    "1": "worktop 1",
    "2": "worktop 2",
    "3": "worktop 3",
    "4": "worktop 4",
    "5": "worktop 5",
    "6": "worktop 6",
    "7": "worktop 7",
    "8": "worktop 8",
    "9": "worktop 9",
    "10": "worktop 10"
},
"floors": {
    "1": "floor 1",
    "2": "floor 2",
    "3": "floor 3",
    "4": "floor 4",
    "5": "floor 5",
    "6": "floor 6",
    "7": "floor 7",
    "8": "floor 8",
    "9": "floor 9",
    "10": "floor 10"
},
"walls": {
    "1": "wall 1",
    "2": "wall 2",
    "3": "wall 3",
    "4": "wall 4",
    "5": "wall 5",
    "6": "wall 6",
    "7": "wall 7",
    "8": "wall 8",
    "9": "wall 9",
    "10": "wall 10"
}
};

alert(temp.doors['9']);

哪个工作正常。

如果我这样做，alert(temp.doors.9);我会得到

未捕获的 SyntaxError：意外的数字

所以也许尝试这样做：

temp["subObjectName"]["subSubObjectName"];

它应该可以工作，因为您的 JSON 是有效的！

于 2013-05-08T10:19:36.410 回答
0

如果我理解正确，您正在尝试迭代type变量，即string.

var type = "data."+$(this).data('type');

试试这个：

var type = $(this).data('type');

$.getJSON("js/data.json", function(data){

        var items = [],
            data = data[type];

        $.each(data, function(key, val){
            items.push('<li><a href="" data-name="'+ val +'"><img src="img/wood-nav.jpg" /></a></li>');
        });
        //...
于 2013-05-08T10:26:52.550 回答