javascript - 循环中的 jQuery click()

Question

我通过循环创建了 div 元素，我想在单击 div 时更改 background-color。

var c = $("#container")[0];
for(var i=0; i<6;i++){
  var x = document.createElement("div");
   x.className = "sqare";
   x.click(changecolor(this));
   c.appendChild(x);
}
function changecolor(p){
  return function() {
    p.css("background-color", "yellow");
 }
}

我关注这个Assign click handlers in for loop ，但失败了...

Answer 1

其中 this 不引用可能引用 window 对象的元素，而是传递 x 作为参数和 css()是一个 jQuery 方法，因此您需要使用 jQuery 包装它，或者使用 JavaScript 更新 style 属性。虽然通过设置onClick属性来附加点击事件。

var c = $("#container")[0];
for(var i=0; i<6;i++){
  var x = document.createElement("div");
   x.className = "sqare";
   x.onClick = changecolor(p);
   c.appendChild(x);
}
function changecolor(p){
  return function() {
    p.style.backgroundColor = "yellow";
 }
}

<小时/>

这里可以避免闭包，因为可以在处理程序中访问 this 上下文。

var c = $("#container")[0];
for(var i=0; i<6;i++){
  var x = document.createElement("div");
   x.className = "sqare";
   x.addEvenetListener('click', changecolor);
   c.appendChild(x);
}
function changecolor(){
   this.style.backgroundColor = "yellow";
}

<小时/>引用: addEventListener vs onclick