Question

好的，我不得不重新说出来，以便更好地了解我的要求。

所以我有一个填充div的块，我想让它们在点击时改变颜色。因此，如果我使用 this 的内联引用，则该函数可以正常工作。

<html><head><style>
body       {font-family:"BACKTO1982", System, san serif; background-color:#666; font-weight: normal; font-size: normal; padding: 0; margin: 0; height: 100%; min-height: 700px; width: 100%; min-width: 800px; overflow: hidden;} 
#theBlock  {position:relative; height: 640px; width: 800px; margin:20px auto 20px auto; padding:0; overflow:hidden;} 
.blocks    {height:12px;width:12px;border:1px solid #eee;background-color:#ffffff;margin:0;padding:0;display:inline-block;}
</style><script>
x = 0;
window.onload = function(){
  for(i=0;i<3200;i++){
    var newBlock = document.createElement('div');
    newBlock.setAttribute('class', 'blocks');
    newBlock.setAttribute('id','blockId'+x);
    newBlock.setAttribute('onclick','change(this);');
    document.getElementById('theBlock').appendChild(newBlock);
    x++;
  }
}
function change(x){
  x.style.backgroundColor = '#000000';
}
</script></head><body><div id="theBlock"></div></body></html>

然而，因为内联Javascript不是最干净的代码方式，所以我尝试使用 this 引用来代替 change（）来创建一个函数，如下所示：

document.getElementsByClassName('blocks').onclick = function(){
  this.style.backgroundColor = "#000000";
}

但是这个功能似乎没有做任何事情。我不确定这是不是它没有正确引用对象，或者是格式错误，但是我的控制台似乎没有发现任何问题，它只是不起作用。

希望这比我第一次尝试这个问题更有意义。

Answer 1

编辑：根据评论中的建议更改了事件监听器代码。

document.getElementsByClassName('blocks')是一个数组 NodeList，包含所有具有类blocks的元素。因此，您无法为所有人添加一个偶数监听器。

试试这个：

var arr = document.getElementsByClassName('blocks');
var len = arr.length;
var toBlack = function() {this.style.backgroundColor = '#000000';}
for (var i=0; i<len; i++) {
  arr[i].onclick = toBlack;
}

循环遍历数组 NodeList，并为每个元素附加一个事件监听器。

Answer 2

//newBlock.setAttribute('onclick','change(this);');
        newBlock.onclick = change;
...    ....
function change() {
  this.style.backgroundColor = '#000000';
}

但是当我测试你的代码时，它正在我的PC上使用IE9。

Javascript此引用适用于内联但不具有内联引用

2 个答案: