js for循环中点击事件中无法获取每一个i值的问题
2024-08-28 23:55:59
好像是第二次遇到这个问题,必须要总结一下!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
li{
width: 100px;
height: 50px;
background-color: red;
margin-bottom: 10px;
}
</style>
<body>
<ul id="ulList">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var lis = document.getElementById("ulList").getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){
console.log(i);
} }
</script>
</body>
</html>
如果按照以上方法,无论点击哪一个li标签,i的值都会是4,并不能像我们所想的那样打印出0,1,2,3,原因是什么呢?
暂时也不太清楚,好像涉及闭包,因为也没学到,就参考别人回答总结一下。
for循环是一个外部闭包,依次绑定的点击事件是一个函数实例,也产生了一个闭包域,它引用了外部闭包的变量i,外部闭包域中i的最终值为4,点击事件触发时引用外部闭包变量i(此时i=4),所以输出的值全为4。
暂时先写两种自己能掌握的解决方法:
方法一:在for循环中点击事件外套一个自执行的匿名函数,将索引变量i保存到匿名函数的形参中
<script>
var lis = document.getElementById("ulList").getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
(function(arg){
lis[i].onclick = function(){
console.log(arg);
}
})(i);
}
</script>
方法二:在for循环中,为每一个要点击的对象创建属性用来保存索引变量i
<script>
var lis = document.getElementById("ulList").getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].i = i; //创建属性保存变量i
lis[i].onclick = function(){
console.log(this.i);
// console.log(lis[i].i);绝对不能这样写,要不然 Uncaught TypeError: Cannot read property 'i' of undefined
}
}
</script>
最新文章
- 关于Java集合的小抄
- JMeter 聚合报告之 90% Line 参数说明
- python——常用功能之文本处理
- [小北De编程手记] : Selenium For C# 教程目录
- C和指针笔记 3.7 存储类型
- spring的自动装配(default-autowire=";byName";)
- Qt窗体关闭时,如何自动销毁窗体类对象
- perl /m 当作多行处理
- 腾讯webqq最新password加密算法,hash算法
- VC++非MFC项目中如何使用TRACE宏
- 四级流水线的8bit加法器
- 如何利用Win32API取得另一支程式中的ListView內的所有值(RegisterHotKey,ReadProcessMemory,WindowFromPoint和VirtualAllocEx)
- 【转】Java 内部类种类及使用解析
- js架构设计模式——前端MVVM框架设计及实现(一)
- java中的反射整理
- CMD运行JAVA出现编码GBK的不可映射字符处理方法?
- 【Python】keras使用LSTM拟合曲线
- 系统、决策、控制研究系列(SSDC)
- Ex 5_28 Alice想要举办一个舞会..._第十次作业
- Git clone 报错 Unable to negotiate with xxx.xxx.xxx.xxx port 12345: no matching cipher found. Their offer: aes128-cbc,3des-cbc,blowfish-cbc