Question

我在Paste Bin @ http://pastebin.com/bu2sz2C0上有代码。我被赋予了这个代码作为学术作业，并不是我自己写的代码，除了killFrog函数。

我遇到的问题是使用killFrog函数。每只青蛙都存储在一个名为Frogs的数组中，然后代表这些青蛙的DOM元素存储为_frogs。我试图让它成为当你单击Kill Frog按钮时触发killFrog函数并从Array中删除一个随机青蛙，然后从DOM中删除该Frog。

使用console.log（）我找到了青蛙的ID和属性＆＃34; data-frogid＆＃34;青蛙的正确输出应该从DOM移除哪些青蛙，但有时它会从dom中取出正确的青蛙，有时是错误的青蛙或有时根本没有。我对此感到困惑，因为它正在输出到控制台，应该删除青蛙，但不要删除正确的青蛙。

这是我为killFrog编写的代码

killFrog = function(){
          console.log('////////////Selected Frog to Die///////////////');
          var _randomFrog = this.Frogs[Math.floor(Math.random()*this.Frogs.length)];
          console.log(_randomFrog);
          var indexOfFrog = this.Frogs.indexOf(_randomFrog);
          this.Frogs.splice(indexOfFrog,1); //Remove frog from array
          console.log(_frogs.childNodes);
          console.log("ID of FROG to be deleted" + _randomFrog.getId());
          for (var i = 0; i < _frogs.childNodes.length; i++) {
             if (_randomFrog.getId() == _frogs.childNodes[i].getAttribute("data-frogid")){
                console.log("ID : " + _randomFrog.getId() +  " Data attribute : " + _frogs.childNodes[i].getAttribute("data-frogid") + " NAME: " + _randomFrog.name + " DOM eleement name : " + _frogs.childNodes[i].innerHTML + " To be removed");
                // _frogs.removeChild(_frogs.childNodes[i]);
                _frogs.childNodes[i].parentNode.removeChild(_frogs.childNodes[i]);
             }
          };
          console.log(this.Frogs.length + "Frogs left in the array");
      },

更新：

更新代码以删除重复的i变量@ http://pastebin.com/4JiQBK12

我认为这是由于在青蛙阵列上设置了Id的方式。从我更新的代码中，当我显示青蛙的数据属性时，它与从数组中获取的ID不对应。

这可能是为

的青蛙设置id的方式

frog.setId(this.Frogs[this.Frogs.length - 1] ? this.Frogs[this.Frogs.length - 1].getId() + 1 : 1);

Answer 1

因为您正在使用显示模式来设置原型，所以Frog（和Pond）的所有实例都使用相同的数据。例如，如果你将青蛙1的id设置为5，青蛙2的id也将是5.这是你所拥有的简化示例：

function foo () {}
foo.prototype = function () {
    var _id = 5;
    return {
        getId: function() {
            return _id;
        },
        setId: function(id) {
            _id = id
        }
    }
}();
var foo1 = new foo();
var foo2 = new foo();
foo1.setId(1);
console.log(foo2.getId()); //1
foo2.setId(8);
console.log(foo1.getId()); //8

要解决此问题，请勿使用显示模式来定义原型。有几种方法，我在下面展示的只是其中之一。

function foo () {
    var _id = 0;
    this.getId = function() {
        return _id;
    };
    this.setId = function(id) {
        _id = id
    };
}
var foo1 = new foo();
var foo2 = new foo();
foo1.setId(1);
console.log(foo2.getId()); //0
foo2.setId(8);
console.log(foo1.getId()); //1

Answer 2

您在同一范围内两次声明i变量：

var i = this.Frogs.indexOf(_randomFrog);

和

for (var i = 0; i < _frogs.childNodes.length; i++) {

变量应始终在范围的顶部声明。吊装和覆盖会引起很多混乱，就像这样。

对于这种情况，vars的名称不应相同。

Javascript从DOM中删除错误的元素

2 个答案: