JavaScript - 对从 Container 中移除元素非常困惑

Question

我正在用 JavaScript 制作一个 2D、自上而下的塞尔达风格网络 Angular 色扮演游戏单人游戏。

当玩家(紫色衬衫)走近一只猫时，它会“拯救”它...这基本上从 ContainerOfAnimals 中移除了 animalContainer(从而移除了 animalContainer 的来自舞台的 BMP)，然后将该 animalContainer 的 ID 添加到 rescuedTotal_Array...

奇怪的是，在下图中，我能够拯救 animalContainer2 并且然后拯救animalContainer1...但是如果我从 animalContainer1 转到 animalContainer2，它抛出一个

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 21，然后下降到 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 

代码片段:

        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();
        }

我不知道为什么我将元素存储在数组中/从舞台上移除它们的顺序很重要...

---

编辑:我觉得我可以通过按元素 ID 而不是按索引从 ContainerOfAnimals 中删除元素来解决这个问题...通过 Container 对象不提供 getChildID() 函数...

所以我尝试了:

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

console.log(childToRemove) 为 child 提供 null

但是这样做:console.log(ContainerOfAnimals.children[index].id); 给我 id 21，这是正确的 id...

Answer 1

请注意 EaselJS 元素不是 DOM 元素。

假设你想通过它的 id 删除一个元素，我建议这样做:

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 可能不是最好的架构解决方案。在我的 EaselJS 程序中，我保留对对象本身的引用，这样我就不必搜索它们。