Javascript从DOM中删除错误的元素

Javascript deleting wrong elements from the DOM

本文关键字：错误 元素 删除 DOM Javascript      更新时间：2023-09-26

我有粘贴Bin @ http://pastebin.com/bu2sz2C0的代码。除了killFrog函数之外，这段代码并不是我自己写的。

我遇到的问题是与killFrog功能。每只青蛙都存储在一个名为Frogs的数组中，然后将表示这些青蛙的DOM元素存储为_frogs。我试图做到这一点，当您单击Kill Frog按钮时，killFrog函数被触发并从数组中删除随机青蛙，然后从DOM中删除该青蛙。

使用console.log()我已经找到了青蛙的ID和青蛙的属性"data-frogid"，并且正确地输出了应该从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);

因为您正在使用揭示模式来设置原型，所以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

您在同一作用域中声明了两次i变量:

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

和

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

变量应该总是在作用域的顶部声明。提升和覆盖可能会导致很多混乱，就像这样。

在这种情况下，变量不应该被命名为相同的

相关文章：