因此,在这一刻,我想创建在我的应用程序,它可以重新使用的点击事件,jQuery的fetchJSON选择正确的对象
资产净值的基本流程,是用户会点击一个链接,单击该链接将得到一个getJSON请求,JSON被解析并返回到一个subnav中,但是我稍微松了一点就是在JSON中访问正确的对象以循环创建sub-nav,在下面是我的代码。
$(".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"
}
}
什么有一个我已经尝试过?我已经尝试在循环之外构建数据对象名称,然后将其传入,因此,如果我点击了门,例如var type
会然后=“门”,然后我将其联合到data.
然而,当循环通过I得到他的错误,
Uncaught TypeError: Cannot use 'in' operator to search for '9' in data.doors
看来,我不能进入我需要基于点击的对象,但必须有一种方式吗?