JavaScript - 从Container中删除元素时非常困惑 [英] JavaScript - extremely confused on removing elements from Container

问题描述

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

I'm making a 2D, top-down Zelda style web rpg single player in JavaScript.

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

When the player (purple shirt) walks near a cat, it will "rescue" it... which basically removes the animalContainer from the ContainerOfAnimals (thereby removing animalContainer's BMP from the stage), and then add the id of that animalContainer to a rescuedTotal_Array...

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

The weird thing is, In the pic below, I'm able to rescue animalContainer2 and then rescue animalContainer1... But if I go from animalContainer1 to animalContainer2, it throws a

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

...
基本上：

工作方式：获取ID 22，然后达到ID 21 - >>>我注意到的一件事是元素名称不会改变ID ...不确定为什么......所以对于破碎的方式......它甚至可能无法将元素名称 animalContainer2 与ID相关联？但我不知道身份证和姓名如何能够像这样解除关联..

Working way: get ID 22, then up to ID 21 ->>> One thing I notice with this is that the element name doesn't change for the ID... not sure why... so for the broken way... it may not be able to even associate element name animalContainer2 with an ID? But I don't know how the ID and the name could get disassociated like that..

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（）函数...

I feel I can solve this issue by removing element from ContainerOfAnimals by element ID instead of by index... by Container object offers no getChildID() function...

所以我试过：

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

console.log（childToRemove）给我 null for children

console.log(childToRemove) gives me null for children

但是这样做： console.log（ContainerOfAnimals.children [index] .id）; 给出我id 21 ，这是正确的ID ...

But doing this: console.log(ContainerOfAnimals.children[index].id); gives me id 21, which is the correct id...

推荐答案

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

Beware that EaselJS elements aren't DOM elements.

假设您想要按其ID删除元素，我建议：

Supposing you want to remove an element by its id, I'd suggest this :

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

But using the id might not be the best architectural solution. In my EaselJS program I keep a reference to the objects themselves so that I don't have to search them.

这篇关于JavaScript - 从Container中删除元素时非常困惑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！