var Menu=$(".tab");
for(var i=0;i<Menu.length;i++){
$(".tab").eq(i).onclick=function(){
$(".tabContent").css("display","none");
$(".tabContent").eq(i).css("display","block");
}
}
}
上面这个方法执行后,会发现遍历数组后,监听到的事件,索引值始终等于遍历结束之后的值。
错误原因:JS引擎的解析机制是,执行的时候将for循环中代码执行,这个时候i变成最后的值,
当发生onclick事件时,会找到运算之后的i,因此绑定的事件是最后的。
解决办法:
1、使用闭包
这个时候成为局部变量,不会受外面的循环完的i值影响
var Menu=$(".tab");
for(var i=0;i<Menu.length;i++){
(function(k){
$(".tab").eq(k).onclick=function(){
$(".tabContent").css("display","none");
$(".tabContent").eq(k).css("display","block");
}
})(i)
}
2、给节点添加某个属性var Menu=$(".tab");
for(var i=0;i<Menu.length;i++){
$(".tab").eq(i).index=i;
$(".tab").eq(i).onclick=function(){
$(".tabContent").css("display","none");
$(".tabContent").eq(this.index).css("display","block");
}
}
}
本文探讨了在JavaScript中使用for循环为元素绑定点击事件时,事件处理函数内部获取的索引值总是循环结束后最后一个的问题。原因是由于作用域和事件触发时机导致的。文中提出两种解决方案:一是利用闭包创建局部变量;二是直接在元素上设置属性`index`,并在事件处理函数中使用`this.index`来获取正确的索引。
2019

被折叠的 条评论
为什么被折叠?



