사용하여 연결하고

Question

var Animals = { 
    "Europe": { "weasel.jpg": "squeak", "cow.jpg": "moo"}, 
    "Africa": { "lion.jpg": "roar", "gazelle.jpg": "bark"},   
}; 

function region(a){ 
    var b = "Animals."+a; 
    for(var index in b) { 
     var target = document.getElementById('div1'); 
     var newnode = document.createElement('img'); 
     newnode.src = index; 
     target.appendChild(newnode) 
    } 
} 

되는 관련 배열 HTML을 통해 루프에 전달 된 매개 변수

<li onclick="europe('Europe')">Europe</li> 

목표 : 유럽 <li>의 클릭에,이 다음에 연결됩니다 내 지역 기능으로 단어 유럽을 통과

이것은 루프의 for(var index in Animals.Europe)을 사용하여 맨 위에있는 객체 구조 내의 배열을 식별하기위한 것입니다. Animals.Europe을 생성하는 연결이 왜 내가 입력 한 것과 같은 방식으로 처리되지 않는 이유는 무엇입니까?

또한 배열을 사용하여 다른 동물에 대한 이미지 소스 및 설명을 저장하고 있음을 알 수 있습니다. 제한된 코딩 지식을 사용하면 이것이 내가 생각할 수있는 모든 것입니다. HTML로 생성하기 위해 이미지/설명 데이터를 저장하는 더 쉬운 방법이 있습니까?

Answer 1

당신은 사용하여 유럽의 속성에 액세스 할 수 있습니다 이런 식으로 객체 작업에 대한 자세한 내용을보실 수 있습니다

여기에 배열에 동물을 저장하는 것이 아니라 이미지 이름이 키 인 객체에 동물을 저장하는 것입니다. 일반적으로 관련 이름을 키로 사용하려고합니다. 예를 들어 각 대륙

var Animals = { 
    "Europe": [{ 
     imageSrc: "weasel.jpg", 
     cry: "squeak" 
    },{ 
     imageSrc: "cow.jpg", 
     cry: "moo" 
    }], 
    "Africa": [{ 
     imageSrc: "lion.jpg", 
     cry: "roar" 
    },{ 
     imageSrc: "gazelle.jpg", 
     cry: "bark" 
    }]   
}; 

이제 동물 [ '유럽']에 대한 동물의 배열을 원하는 경우는 결국 다른 속성을 저장할 수있는 객체의 배열을 제공합니다.

이

var b = Animals['Europe']; 

for(var i=0; i < b.length; i++) { 
    var target = document.getElementById('div1'); 
    var newnode = document.createElement('img'); 
    var animalData = b[i]; // The array item is now an object 
    newnode.src = animalData.imageSrc; 
    target.appendChild(newnode) 
} 

Answer 2

"동물." + a는 문자열 값입니다 (예 : "Animals.Europe"은 Animals.Europe과 같은 것이 아닙니다. 첫 번째 줄을 var b = Animals[a];으로 변경하면 모두 설정해야합니다.

편집 : 그리고 elclanrs가 지적한대로 이 아니라 region('Europe')이어야합니다.

Answer 3

내가 이것을 입력 한 것처럼 Animals.Europe를 생산하는 연결이 동일한 방식으로 처리되지 않는 이유

?

이 경우 변수 b은 다른 문자열 (즉, 문자 목록)처럼 취급되는 문자열 ("Animals.Europe")입니다. 즉, 루프를 시도 할 때 (for(index in b)) 간단한 문자 목록을 반복하게됩니다.

대신 할 수있는 것은 개체 속성에 액세스하는 대괄호 표기법을 사용하는 것입니다. 즉, var b = Animals[a]을 쓰고 Animals에서 a 속성을 검색 할 수 있습니다. 당신이 "지역"을 호출해야 할 때 당신은 또한 당신이 "유럽"함수를 호출하고

Animals[a] 

을 다음 on this MDN page