배열 객체를 선택된 객체에 인쇄

Question

배열 배열 값을 가진 여러 항목을 가진 객체가 있습니다. 나는 또한 사용자가 클릭하고 그들이 클릭 한 div와 관련된 배열 배열을 보여줄 수있는 일련의 div 엘리먼트를 가진 페이지를 가지고있다. 그러나, 이것은 일어나지 않습니다. 개체 항목을 담고있는 div를 클릭하면 정의되지 않은 로그가 나타납니다. 누구든지 내가 잘못하고있는 것을 나에게 설명 할 수 있을까?

var Alerts = { 
    apu: [["APU Power Fail", "APU[1]"], ["APU Power Fault", "APU[2]"], ["APU Generator Fail", "APU[3]"], ["APU High Oil Temperature", "APU[4]"], ["APU Hot Start", "APU[5]"], ["APU Loss Overspeed Protection", "APU[6]"], ["APU Starter Engaged", "APU[7]"], ["APU Fire", "APU[8]"], ["APU Fails Bite Check", "APU[9]"], ["APU Door Fails to Open", "APU[10]"], ["APU No Flame", "APU[11]"], ["Left Fire Bottle Discharge", "APU[12]"]], 

    avionics: [["ADS 1 Fail", "AVIONICS[1]"], ["ADS 2 Fail", "AVIONICS[2]"], ["ADS 3 Fail", "AVIONICS[3]"], ["AP 1 Fail", "AVIONICS[4]"], ["AP 2 Fail", "AVIONICS[5]"], ["Autopilots Fail", "AVIONICS[6]"], ["Baroset 1 Fail", "AVIONICS[7]"], ["Baroset 2 Fail", "AVIONICS[8]"], ["Baroset 3 Fail", "AVIONICS[9]"], ["CCD 1 Fail", "AVIONICS[10]"], ["CCD 2 Fail", "AVIONICS[11]"], ["Heading Comparison Monitor", "AVIONICS[12]"], ["Heading and Roll Comparison Monitor", "AVIONICS[13]"], ["Display Controller 1 Fail", "AVIONICS[14]"], ["Display Controller 2 Fail", "AVIONICS[15]"], ["IRS 1 Fail", "AVIONICS[16]"], ["IRS 2 Fail", "AVIONICS[17]"], ["IRS 3 Fail", "AVIONICS[18]"], ["Glideslope Antenna Fail", "AVIONICS[19]"], ["MAU 1A Fail", "AVIONICS[20]"], ["MAU 1B Fail", "AVIONICS[21]"], ["MAU 2A Fail", "AVIONICS[22]"], ["MAU 2B Fail", "AVIONICS[23]"], ["MAU 3A Fail", "AVIONICS[24]"], ["MAU 3B Fail", "AVIONICS[25]"], ["MRC 1 Fail", "AVIONICS[26]"], ["MRC 2 Fail", "AVIONICS[27]"], ["GPS Degrade", "AVIONICS[28]"], ["GPS #1 Fail", "AVIONICS[28]"], ["GPS #2 Fail", "AVIONICS[30]"], ["Display Unit 1 Fail", "AVIONICS[31]"], ["Display Unit 2 Fail", "AVIONICS[32]"], ["Display Unit 3 Fail", "AVIONICS[33]"], ["Display Unit 4 Fail", "AVIONICS[34]"], ["GPS - Unable RNP", "AVIONICS[35]"]] 
} 
for(var array in Alerts){ 
    var system = array.toUpperCase(); 
    $("#form_emergencies").append("<div class='systems' id='" +array +"'><div class='select_box'></div><h2> " +system +"</h2></div>"); 

    $(".systems").on("click", function(){ 
     $.each(Alerts[array], function(ind,item){ 
      console.log(Alerts[array].item); 
     }) 
    }) 
} 

Answer 1

귀하가 선택한 변수 이름은 매우 혼란 스럽습니다.

의이 문 array에, for(var array in Alerts) 시작하자 그러므로 나는 systemKey에 array을 바꿀 것, 그것은 단지의 회전에 도메인의 시스템의 핵심을 말한다, 실제로 배열이 아닙니다.

그런 다음 루프 내부에서 핸들러를 연결하십시오. 이 코드는 두 번째 시스템에 두 개의 클릭 핸들러가 연결되기 때문에 문제가됩니다.

for(var systemKey in Alerts){ 
    var system = systemKey.toUpperCase(); 
    $("#form_emergencies").append("<div class='systems' id='" +systemKey +"'><div class='select_box'></div><h2> " +system +"</h2></div>"); 
} 

//Notice I used this.id rather than array 
$(".systems").on("click", function(){ 
    $.each(Alerts[this.id], function(ind,item){ 
     //... 
    }) 
}) 

마지막으로, console.log(Alerts[array].item); 그냥 내가 국회 의사당 문자 내 개체를 만드는 습관을 가지고

Answer 2

이보십시오. 작동 demo

for(var array in Alerts){ 
    var system = array.toUpperCase(); 
    $("#form_emergencies").append("<div class='systems' id='" +array +"'><div class='select_box'></div><h2> " +system +"</h2></div>");  
} 


$(".systems").on("click", function(){ 
    var keyVal = $(this).attr("id"); 
    $.each(Alerts[keyVal], function(ind,item){ 
     $.each(item, function(ind2,item2){ 
       console.log(Alerts[keyVal][ind][ind2]); 
     }); 
    }) 
});