JavaScript - 从Container中删除元素时非常困惑

Question

我正在制作一个2D，自上而下的Zelda风格网络RPG单人游戏。

当玩家（紫色衬衫）走近猫时，它会“拯救”它......这基本上会从animalContainer移除ContainerOfAnimals（从而从舞台上移除animalContainer的BMP），然后将该animalContainer的id添加到rescuedTotal_Array ...

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

animalContainer2

... 基本上

工作方式：获取ID 22，然后达到ID 21 - ＆gt;＆gt;＆gt;我注意到的一点是，元素名称不会因ID而改变...不确定为什么......所以对于破碎的方式......它甚至可能无法关联元素名称Uncaught TypeError: Cannot read property 'id' of undefined` error. 有身份证？但是我不知道身份证和姓名如何能够像那样被解除..

animalContainer2

破碎方式 - 抛出错误：获取ID 21，然后降至ID 22

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 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而不是索引从ContainerOfAnimals中删除元素来解决这个问题...通过Container对象不提供 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(); } 函数...

所以我试过了：

getChildID()

console.log（childToRemove）为我提供了 var childToRemove = document.getElementById(ContainerOfAnimals.children[index]); console.log(childToRemove); ContainerOfAnimals.removeChild(childToRemove); 个孩子

但是执行此操作：null为我提供了身份console.log(ContainerOfAnimals.children[index].id);，这是正确的ID ...

Answer 1

您的rescuedTotal_Array可能是一个关联数组（或变形为一个），可能包含以下内容：

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 2

如果是这种情况，我不完全确定（如果不看一下你的整个程序我就无法知道），但可能是这样：

我假设您的“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的第一个子节点。怎么了？子命令列表现在已经改变，第二个元素成为第一个元素，第三个元素成为第二个元素等......

你可以通过使用包含所有子节点的静态数组来解决这个问题，如下所示：

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

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

现在从DOM -tree中删除元素不会从子数组中删除该元素（这是静态的）。请记住，[] .slice.call在IE8或更低版本中不起作用。

如果这是问题，请告诉我。我没有足够的评论来评论，所以我不得不做一个完整的帖子：）

Answer 3

请注意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程序中，我保留对对象本身的引用，以便我不必搜索它们。

Answer 4

HY，

尝试这样的陈述：

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

如果你注意到我只是转过身来。它始于后退。 这是愚蠢的，但也许这个错误就是那个:)

让我知道它是怎么回事！

此致