1

いくつかの要素をループしてから、クリックしたときにこれらの要素を操作する新しい要素を追加しています。説明するのは難しいので、この Fiddle を見てください。

http://jsfiddle.net/pgFcn/3/

興味深い部分は次のコードです (簡潔にするために疑似コードを使用しています)。

for (var i = 0; i < divs.length; i++) {
    var div = divs[i];

    someOtherElement.addEventListener("click", function () {
        testDiv(div); // always refers to the last div because variable is overwritten next loop
    });
}

testDiv 呼び出しがそれぞれ div 1、div 2、div 3 を参照することを期待していますが、変数は次のループ反復で上書きされるため、それらはすべて div 3 を参照します。どうすればこれを解決できますか?

4

2 に答える 2

2

これは、問題を解決する別の方法です...

function testDiv(d) {
    // this doesn't work as expected, it always shows "Div 3"
    alert(d.innerText);
}

var divs = document.getElementsByTagName("div");

for (var i = 0; i < divs.length; i++) {
    var div = divs[i];
    var a = document.createElement("a");
    a.index = i;  
    a.innerText = "[this should point to Div" + (i+1) + "]";
    a.href = "#";
    a.addEventListener("click", function (e) {
        var e = e || window.event;
        var tg = e.target || e.srcElement;
        testDiv(divs[tg.index]);
    });
    document.body.appendChild(a);
}
于 2013-07-09T12:36:27.740 に答える