Question

我尝试在单击时将div附加到元素，但是当我使用.appendChild（div）时，我尝试连接的元素未定义。我很困惑，因为它清楚地存在于DOM中，因为我能够检测到它上面的点击，我无法附加到它。

var pcells = document.getElementsByClassName('priority-cell');

for (var i=0; i < pcells.length; i++) {
  pcells[i].onclick = function () {
    var div = document.createElement('div');
       div.style.backgroundColor = "red";
       div.style.height = "10px";
       div.style.width = "10px";

       pcells[i].appendChild(div);
  };
}

Answer 1

您有一个范围问题。您需要将事件详细信息传递到处理程序中，并使用target属性来标识单击的单元格。

var pcells = document.getElementsByClassName('priority-cell');

for (var i=0; i < pcells.length; i++) {
  pcells[i].onclick = function (e) {
    var div = document.createElement('div');
       div.style.backgroundColor = "red";
       div.style.height = "10px";
       div.style.width = "10px";

       e.target.appendChild(div);
  };
}

（JSFiddle：https://jsfiddle.net/z3nhprzp/）

Answer 2

我认为问题就在于：

var a = [1, 2, 3, 4, 5];
for(var i=0; i < a.length; i++) {
    setTimeout(function() {
        console.log(i); //5
        console.log(a[i]) //undefined;
    }, 1000)
}

如果你想解决，你需要关闭：

   var a = [1, 2, 3, 4, 5];
    for(var i=0; i < a.length; i++) {
        (function(index) {
            setTimeout(function() {
                console.log(index); //1,2,3,4,5
                console.log(a[index]) //1,2,3,4,5;
            }, 1000)
        })(i);
    }

这是问题的本质！

代码：

for (var i=0; i < pcells.length; i++) {
    (function(index) {
        pcells[index].onclick = function () {
            var div = document.createElement('div');
            div.style.backgroundColor = "red";
            div.style.height = "10px";
            div.style.width = "10px";

            pcells[index].appendChild(div);
        };
    })(i);  
}

顺便说一句，麻烦是使用'this'或'event'，如：

element.onclick = function(event) {
    console.log(this);
    console.log(event);
    //use 'this' or 'event' do something
}

Answer 3

试试这个：

var pcells = document.getElementsByClassName('priority-cell');

for (var i=0; i < pcells.length; i++) {
  pcells[i].onclick = function () {
    var div = document.createElement('div');
       div.style.backgroundColor = "red";
       div.style.height = "10px";
       div.style.width = "10px";

       this.appendChild(div);
  };
}

<div class="priority-cell">CLICK HERE</div>

无法将儿童附加到点击的元素

3 个答案: