通过 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));
});

Answer 2

您得到错误数字的原因是您正在创建的事件处理函数获得了对i 变量的持久引用，不是副本从它们创建时开始。

解决这个问题的方法是让处理程序关闭一些不会改变的东西。这里有三种方法可以做到这一点，第一种是特定于 jQuery 的（看起来你正在使用 jQuery）：

jQuery 的each

看起来您正在使用 jQuery，在这种情况下，您可以使用它的 each 来获取要使用的不会改变的索引：

var rows = $(".row");
rows.each(function(index) {
    if (index % 2 === 0) {
        $(this).click(function() {
            alert('I am line number ' + index);
        });
    }
});

现在，事件处理函数关闭了对我们提供给 each 的函数的调用的 index 参数，并且由于 index 参数永远不会改变，您会在警报中看到正确的数字。

使用构建器函数

（非 jQuery）您可以使用构建器函数解决此问题：

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

这里，事件处理函数关闭了buildHandler 中的index 参数，并且由于index 参数永远不会改变，您会在警报中看到正确的数字。

forEach

（非 jQuery）您还可以使用 ES5 的 forEach 函数（这是您可以在 ES5 之前的环境中填充的 ES5 功能之一）来解决这个问题：

var rows = document.getElementsByClassName('row');
Array.prototype.forEach.call(rows, function(row, index) {
    if (index % 2 === 0) {
        $(row).click(function () {
            alert('I am line number ' + index);
        });
    }
});

这与上面两个的工作方式相同，通过关闭 index，这不会改变。