javascript - forループを介してバインドされたイベントの数値が間違っています

Question

var rows = document.getElementsByClassName('row');
for (var i = 0, l = rows.length; i < l; i++) {
    if (i % 2 === 0) {
        $(rows[i]).click(function () {
            alert('I am line number ' + i);
        }
    }
}

こんにちは、各行の実際の行番号を取得するにはどうすればよいですか? 偶数行でクリックイベントをトリガーすると得られるものはすべて、上限値が警告されます(つまり、rows.length = 7、iクリックされた行ごとに6になります)。

Answer 1

問題は、clickイベントがトリガーされると、i変数がループの反復によって既に変更されていることです。理論的には、クロージャーを使用して物事を機能させることができます。

for (var i = 0, l = rows.length; i < l; i++) {
    if (i % 2 === 0) {
        (function(i) {
            $(rows[i]).click(function() {
                alert("I am line number " + i);
            });
        )(i);
    }
}

実際には、（コードから理解したように）jQueryを使用する場合、:evenセレクターを使用する方が簡単です：

$(".row:even").click(function() {
    alert("I am line number " + $(".row").index(this));
});