因此,在這一刻,我想創建在我的應用程序,它可以重新使用的點擊事件,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
看來,我不能進入我需要基於點擊的對象,但必須有一種方式嗎?