javascript - onclick をループ内のノードにバインドする

Question

onclick イベントを各ノードにバインドする関数 add_the_handler があります。次の例は"3"、任意のノードをクリックすると、すべてのアラート ウィンドウに表示されます。

var add_the_handlers = function (nodes) {

var i;
    for (i=0; i< nodes.length; i+=1) {

        nodes[i].onclick = function (e) {
            alert(i);    
        };
    }
};

フィドルはこちら: http://jsfiddle.net/D886E/3/

ノードがアラート ウィンドウに異なる値 1、2、3 を出力しないのはなぜですか?

Answer 1

このフィドルを確認してください。基本的に、ループ内の適切なインデックスへのリスナーのアタッチを処理するには、関数 clojure が必要です。

var add_the_handlers = function (nodes) {

    var i;

    for (i = 0; i < nodes.length; i += 1) {
        (function (i) {
            nodes[i].onclick = function (e) {
                alert(i);
            };

        })(i);
    }
};

pnodes = document.getElementsByClassName("node");

add_the_handlers(pnodes);