示例代码:
原因:此时onclick是一个闭包函数,每次引用的都是外部函数的最后一个变量,而此时i已经循环完毕,值为5
解决办法:
方法一:将循环中的 i 值设置为事件对象的属性,在上面的例子中,事件对象就是lis[i];
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var list = document.getElementsByTagName("li");
for(var i=0;i<list.length;i++){
list[i].onclick = function () {
alert(i);
}
}
</script>
问题:希望输出点击li当前的索引值,但是结果却全都是5;
原因:此时onclick是一个闭包函数,每次引用的都是外部函数的最后一个变量,而此时i已经循环完毕,值为5
解决办法:
方法一:将循环中的 i 值设置为事件对象的属性,在上面的例子中,事件对象就是lis[i];
var list = document.getElementsByTagName("li");
for(var i=0;i<list.length;i++){
list[i].index =i;
list[i].onclick = function () {
alert(this.index);
}
}
方法二:外层加一个立即调用的匿名函数,此时每次调用onclick函数时,传入的参数时外层函数的e,也就时逐个传入的 i 值
var list = document.getElementsByTagName("li");
for(var i=0;i<list.length;i++){
(function (e) {
list[i].onclick = function () {
alert(e);
}
})(i)
}
方法三:仍然选择使用匿名函数,事件函数调用时调用的值arg是外层函数的arg,此值是逐个又i传入的!
var list = document.getElementsByTagName("li");
for(var i=0;i<list.length;i++){
list[i].onclick = (function (arg) {
return function () {
alert(arg);
}
})(i)
}
方法四:Function方法
var list = document.getElementsByTagName("li");
for ( i=0;i<list.length ;i++ )
{
list[i].οnclick=new Function("alert(" + i + ");"); //每次都会出new一个新函数
}
方法五:ES6的let方法,低版本浏览器会报错。
var list = document.getElementsByTagName("li");
for (let i=0;i<list.length ;i++ )
{
list[i].onclick = function() {
alert(i);
}
}
参考引用:https://www.cnblogs.com/younylight/p/7744894.html