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(。
触发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));
});
您得到错误数字的原因是,您正在创建的事件处理程序函数获得了对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
参数永远不会更改,因此您会在警报中看到正确的数字。
使用生成器函数
(Non-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
(Non-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
,这不会改变。