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

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

当玩家（紫色衬衫）走近猫时，它将“拯救”它……这基本上从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 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）给了我null的子项

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

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

你的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); } }

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

我假设您的“ContainerOfAnimals”是一个HTML元素，并且您正在使用它的.children -property检索它的子节点。 问题是.children -property返回一个“实时列表” ！

让我来certificate一下： 

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

假设你删除了ContainerOfAnimals的第一个子节点。 怎么了？ 子目录-list现在已经改变，第二个元素成为第一个元素，第三个元素成为第二个元素等……

您可以通过使用包含所有子项的静态数组来解决此问题，如下所示： 

 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或更低版本中不起作用。

如果这是问题，请告诉我。 我没有足够的评论，所以我不得不发一个完整的post:)

HY，

尝试这样的声明： 

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

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

让我知道事情的后续！

问候

Interesting Posts