javascript - 関数を要素に追加するときは「i」の値を保持する

Question

私の場合：

var tds = document.getElementsByTagName("td");
for(i=0;i<tds.length;i++)
{
    tds[i].onclick = function()
                      {
                          alert(i);
                      };
}

期待される結果: TD の数を警告します。

ただし、TD が 6 つある場合、返される値は常に「i」の最後の値になります。(6) 関数に追加されたときに「i」の値をその値のままにするにはどうすればよいですか?

ありがとう！

http://jsfiddle.net/nuKEK/11/

Answer 1

値を取得するには、クロージャを作成する必要がありiます。このようなもの

function createFunction(i){
    return function(){
        alert(i);
    };
}

var tds = document.getElementsByTagName("td");
for(i=0;i<tds.length;i++){
    tds[i].onclick = createFunction(i);
}

デモ: http://jsfiddle.net/nuKEK/12/

Answer 2

それへの参照ではなく、その値iを取得するために別の関数に渡すことができます。JavaScript では、数値は値渡しされます。

tds[i].onclick = (function(x) {
    return function() {
        alert(x); // alerting x, i's value
    };
})(i); // passing i as parameter x

その自己実行型の無名関数がループのコンテキストで少し毛むくじゃらに見える場合は、Array.prototype.forEach()代わりに次を試すことができます。

[].forEach.call(document.getElementsByTagName("td"), function(td, i) {
    td.onclick = function() {
        alert(i);
    };
});

[編集]これらのオプションとそのパフォーマンスを見てください。

Answer 3

これは、ほとんどの言語のようにスコープがブロックされていないという点で、Javascript でよくある間違いの 1 つです。関数スコープです。

これを実現するには、onclick の周りにクロージャーを作成する必要があります。

for (i = 0; i < tds.length; i++) {

    (function (index) {
        tds[index].onclick = function() {
            alert(index);
        };
    })(i);

}

Answer 4

var tds = document.getElementsByTagName("td");
for(i=0;i<tds.length;i++)
{
    addClick(tds, i);
}


function addClick(where, i) {
    where[i].onclick = function()
    {
        alert(i);
    };
}