다차원 배열 및 루프 관련 문제

Question

"matched_array_pics.length"를 참조하여 "정의되지 않은 null 속성 또는 null 참조를 가져올 수 없습니다."라는 메시지와 함께이 스크립트가 임의로 충돌합니다. 복제 할 경우 #train div에 동일한 이미지를 두 번 추가합니다. var j = $(".pics").index(this); 나는이 다음과 같이 다시 작성해야한다고 생각 :

$(document).ready(function() { 

    var starting_pics = ["AN.gif", "CN.gif", "EN.gif", "GN.gif"]; 

    var an_array_pics = ["CN.gif", "EN.gif", "GN.gif", "AN.gif"]; 
    var cn_array_pics = ["EN.gif", "GN.gif", "AN.gif", "CN.gif"]; 
    var en_array_pics = ["GN.gif", "AN.gif", "CN.gif", "EN.gif"]; 
    var gn_array_pics = ["AN.gif", "CN.gif", "EN.gif", "GN.gif"]; 

    var grand_array_pics = [an_array_pics, cn_array_pics, en_array_pics, gn_array_pics]; 

    var i = 0; 

    for (i = 0; i < starting_pics.length; i++) { 
     $("<img/>").attr("src", "images/" + starting_pics[i]).load(function() { 
      $(this).appendTo("#main"); 
      $(this).addClass("pics"); 
     }); 
    } 


    $("#main").on("click", ".pics", function() { 

     var j = $(".pics").index(this); // gets the index for the matched_array_pics... 
      console.log(j); 

     $("#sidebar .pics").remove(); 
     $(this).clone().appendTo("#train"); 
     $(this).clone().appendTo("#sidebar"); 
     $("#main .pics").remove(); 

     var matched_array_pics = grand_array_pics[j]; // ... in grand_array_pics. 

     var k = 0; 

     for (k = 0; k < matched_array_pics.length; k++) { 
      $("<img/>").attr("src", "images/" + matched_array_pics[k]).load(function() { 
       $(this).appendTo("#main"); 
       $(this).addClass("pics"); 
      }); 
     } 
    }); 
});  //end ready 

Answer 1

나는 문제는이 라인에 생각 var j = $(this).index(); 당신이 j이 끝나는 것을보고 바로 문제가되는 줄 끝에서 console.log(j);을 추가 할 수 있다면 도움이 될 것 존재. 이 줄이 실행될 때 var matched_array_pics = grand_array_pics[j]; 은 코드 실행시 숫자가 아니기 때문에 undefined이 발생한다고 생각합니다.