JavaScript - 컨테이너에서 요소를 제거하는 데 매우 혼란 스럽습니다.

Question

JavaScript로 2D 하향식 젤다 스타일 웹 rpg 싱글 플레이어를 만들고 있습니다.

플레이어 근처에서 보라색 셔츠를 걷다 보면, "rescue"할 것이다 ... ContainerOfAnimals에서 animalContainer을 기본적으로 제거하여 (스테이지에서 animalContainer의 BMP를 제거함) 해당 ID를 추가합니다. rescuedTotal_Array에 animalContainer ...

이상한 것은 아래의 그림에서, 나는 animalContainer2 다음 구조 animalContainer1를 구출 할 수 있어요 ...하지만 animalContainer2에 animalContainer1에서 이동하는 경우, 그것은

를 throw한다

Uncaught TypeError: Cannot read property 'id' of undefined` error. 

기본적으로

... :

근무 방법 : ID (22)를 얻을 후 최대 ID 21 - >>> 나는이 함께 통지 한 가지 요소 이름이 ID를 변경하지 않는다는 것입니다 ... 이유가 확실치 않으므로 깨진 방법으로 ... 요소 이름 animalContainer2을 ID와 연결할 수도 없습니다. 하지만 ID와 이름이 그렇게 연관을 얻을 수있는 방법을 모르는 ..

ID in rescued array...: 22, element name: animalContainer1, rescued array length: 2, elem index pos: 0, index: 0 

ID in rescued array...: 21, element name: animalContainer1, rescued array length: 2, elem index pos: 1, index: 0 

깨진 방법 - 오류가 발생합니다 : 다음 ID 22

ID in rescued array...: 21, element name: animalContainer1, rescued array length: 1, elem index pos: 0, index: 0 

1. Uncaught TypeError: Cannot read property 'id' of undefined 

까지, ID (21)를 얻을 수를

코드 조각 :

 function grabIt(NPC_id, index) { 
      //check if NPCid already exists in array before adding... 
      if ($.inArray(ContainerOfAnimals.children[index].id, rescuedTotal_Array) == -1) { 
       rescuedTotal_Array.push(ContainerOfAnimals.children[index].id); 
      } 
      if (rescuedTotal_Array.length == 2) { 
       for (var z = 0; z < rescuedTotal_Array.length; z++) { 
        console.log("ID in rescued array...: " + rescuedTotal_Array[z] + ", \n element name: " + ContainerOfAnimals.children[index].name + ", rescued array length: " + rescuedTotal_Array.length + ",\n elem index pos: " + z + ",\n index: " + index); 
       } 
      } 
      //when I remove the first added element to rescuedTotalArray... the 2nd element's index assumes first added element's index... (goes from 1 to 0) 
      console.log(index); 
      console.log("element removed: " + ContainerOfAnimals.children[index]); 
      stage.update(); 
      ContainerOfAnimals.removeChild(ContainerOfAnimals.children[index]); 
      updateHUD(); 
     } 

,691 363,210

나는 순서가있는 내가 배열의 요소를 저장하는 이유를 전혀 모르는/... 중요한 것 무대에서

---

편집을 제거 : 내가 요소를 제거하여이 문제를 해결할 수 있다고 생각 요소 ID로 대신 컨테이너 객체에 의해 색인 ...에 의해 ContainerOfAnimals에서 더 getChildID() 기능 ...

그래서 난 해본 제공 :

var childToRemove = document.getElementById(ContainerOfAnimals.children[index]); 
    console.log(childToRemove); 
    ContainerOfAnimals.removeChild(childToRemove); 

을 console.log을 (치

과 같이 문에 대해 시도 console.log(ContainerOfAnimals.children[index].id); 나에게 올바른 ID입니다 ID 21을 제공합니다 ...

Answer 1

EaselJS 요소는 DOM 요소가 아니므로주의하십시오.

function removeElementById(container, id) { 
    for (var i=container.getNumChildren(); i-->0;) { 
     if (container.getChildAt(i).id===id) { 
      container.removeChildAt(i); 
      return true; 
     } 
    } 
    return false; 
} 

을하지만 ID를 사용하여 최고의 건축 해결책이 될하지 않을 수 있습니다 : 당신이 ID로 요소를 제거 할 치죠

,이 제안 것입니다. 내 EaselJS 프로그램에서 개체 자체에 대한 참조를 유지하므로 개체를 검색 할 필요가 없습니다.

Answer 2

HY :

for(var z = rescuedTotal_Array.length; z >= 0; z--) 

ldToRemove) 나에게 아이

그러나이 일에 대한 null을 제공합니다

알아 차 렸을 경우 방금 주위를 돌 렸습니다. 그것은에서 시작하여 거꾸로갑니다. 그것은 어리석은 일이지만, 아마도이 오류는 단지 그 것일 수도 있습니다.

그것이 어떻게되는지 알려주세요!

감사

Answer 3

당신의 rescuedTotal_Array 연관 배열은 가능성 (또는 1로 변신했다)과 같은 것을 포함 할 수있을 수 있습니다 :

rescuedTotal_Array = [1:object,2:object,object:object] 

배열 위가 3의 길이 그러나 색인은 일종의 객체이기 때문에 색인 2를 통해 세 번째 요소에 액세스 할 수 없습니다.

액세스하기 전에 rescuedTotal_Array의 콘텐츠를 덤프하여 (모든 내용이 정상적으로 표시되는지 확인할 수 있도록) 시도하십시오. 이것은 해결책이 아니지만 혼자서 오류를 찾을 수 있도록 도움을 줄 수 있습니다.

나는 가정 :이 경우인지 (나는 당신의 전체 프로그램을 살펴 복용하지 않고 그것을 알 수 없다) 어떤 완전히 확실하지 않다,하지만이 될 수

for (index in rescuedTotal_Array) { 
    if (rescuedTotal_Array.hasOwnProperty(index)) { 
     console.log(rescuedTotal_Array[index]); 
    } 
    else { 
     console.log("no entry found for index: "+index); 
    } 
} 

Answer 4

같은 것을 사용 "ContainerOfAnimals"은 HTML 요소이며 .children -property를 사용하여 자식 노드를 가져 오는 것입니다. 문제는 .children -property가 "라이브 목록"을 반환한다는 것입니다.

나를 보여 보자

var children = ContainerOfAnimals.children; 
console.log(children.length) // 2; 

ContainerOfAnimals.removeChild(children[0]); 
console.log(children.length) // 1; 

이의 당신이 ContainerOfAnimals의 첫 아이를 제거한다고 가정 해 봅시다. 무슨 일이야? children -list가 변경되어 두 번째 요소가 첫 번째 요소가되고 세 번째 요소가 두 번째 요소가됩니다.

모든 자식을 포함하는 정적 배열을 사용하면 다음과 같이 수정할 수 있습니다.

var children = [].slice.call(ContainerOfAnimals.children); 
console.log(children.length) // 2; 

ContainerOfAnimals.removeChild(children[0]); 
console.log(children.length) // 2; 

DOM 트리에서 요소를 제거해도 children 배열 (정적 요소)에서 해당 요소가 제거되지 않습니다. Internet Explorer 8 이하에서는 [] .slice.call이 작동하지 않습니다.

이것이 문제인지 알려주세요. 의견을 말할만한 점수가 충분하지 않아 전체 게시물을 만들어야했습니다.