ループ内のjQueryクリック（）

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に従いますが、失敗した...

thisは、引数と css()はとてもいずれかのjQueryのメソッドであるとして xを渡す代わりに windowオブジェクトを参照してもよい要素を参照していない

Answer 1

をJavaScriptを使用してjQueryまたは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

Answer 2

あなたは、各要素のイベントハンドラを追加する必要はありません。

クリックイベントは1回だけ使用できます。

SIMPLE 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"); 
}); 

やライブの例以下の私の例を確認：あなたは `x.click（changecolor（X））をもしかしてhttps://jsfiddle.net/synz/amnapc70/