jQuery点击（）循环中

我创建了div元素的循环，我想更改background-color当我点击div。jQuery点击（）循环中

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，但失败了......

来源

2016-11-30 張修維

您的意思是'x.click（changecolor（X）） '？ – elclanrs

'this'的值对于循环的每次迭代都是相同的，并且从显示的代码中不清楚它是什么值（如果该代码在全局范围内，则为'window'）。另外，'x'是一个DOM元素，所以它的'.click（）'方法不会分配一个点击处理程序。 – nnnnnn

哪里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

来源

2016-11-30 04:06:15

'x.click（changecolor（x））;'不起作用 - DOM元素的'.click（）'方法不会指定点击处理程序... – nnnnnn

@nnnnnn：是的，你说得对，需要使用'onClick'或'addEventListener'代替 –

是的。尽管如果点击处理程序使用了'this'，那么整个闭环 - 循环的事情根本就没有必要...... – nnnnnn

您不必添加事件处理程序的每个元素。

您可以尝试仅使用1次单击事件。

检查下面

简单的HTML我的例子

<div id="container"></div>

JAVASCRIPT

var c = $("#container"); 
for(var i=0; i<6;i++){ 
    $("<div class='sqare'>hello " + i + "</div>").appendTo(c); 
} 

$(".sqare").on("click",function(){ 
    $(this).css("background-color","yellow"); 
});

而且活生生的例子：https://jsfiddle.net/synz/amnapc70/

来源

2016-11-30 04:26:13 synz

jQuery点击（）循环中

回答

相关问题