js循环与局部变量的问题

2018-02-16 05:34:04 415 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

weixin_39670158 墨衍会员 · AI 创作全网分发关注 + 加入社区

关于js：Uncaught TypeError Cannot read properties of undefined (reading ‘style‘) 全局与局部变量 for循环问题：想实现点击一个li，就会展示对应的div：代码为： var tab_list = document.querySelector('.tab_list'); var lis = tab_list.querySelectorAll('li'); var items = document.querySelectorAll('.item'); for(var i = 0; i < lis.length; i++){ // 设置每个li的index值阅读详情

我想给第一个li 的onclick 弹出1 第二个弹出2
for(var i=0;i<cRes.length;i++){
cRes[i].onclick=function(){
alert("id为"+this.id+ "的编号为"+i);}
}
id是可以正常读取的，但是编号全部都是12,这是为什么？

...全文

Solidworks曲面建模学习（三）——样条曲线本文主要演示平面的空间样条曲线的一些绘制。阅读详情

weixin_39670158

JavaScript 87,983 成员 224,680 内容

+ 关注 + 加入社区

切换为时间正序

天际的海浪 2018-02-16

打赏
举报

循环结束了还能读到局部变量i也是因为闭包，与方案1中的闭包不同，是for循环所在的函数形成的闭包。 for循环和onclick事件没有实质性直接关联。为什么要把i赋给onclick

weixin_39670158 2018-02-16

打赏
举报

引用 1 楼 jslang 的回复:


因为你需要在事件内使用事件外的循环变量i。
当事件触发时，那个循环早就结束了，那时的i的值已经是循环最大值加1了。
所以需要用一些方式保存住当前循环的i的值。
方案1为：用闭包保存住当前循环的i的值。
for(var i=0;i<cRes.length;i++) {
	(function(i){
		cRes[i].onclick=function(){
			alert("id为"+this.id+ "的编号为"+i);
		}
	})(i);
}

方案2为：用let块作用域变量，原理也是闭包（ie11以前不支持）
for(var i=0;i<cRes.length;i++) {
	let j = i;
	cRes[i].onclick=function(){
		alert("id为"+this.id+ "的编号为"+j);
	}
}

方案3为：在事件函数内不使用循环变量i，而是用this获取触发事件的元素
for(var i=0;i<cRes.length;i++) {
	cRes[i].index = i;
	cRes[i].onclick=function(){
		alert("id为"+this.id+ "的编号为"+this.index);
	}
}

当事件触发时，那个循环早就结束了为什么循环结束了还能读到局部变量i 而不是udf？循环过程中不是直接把i赋给onclick就可以了，为什么不这样做？这样的事件绑定机制或者说局部变量***有什么优缺点？

天际的海浪 2018-02-16

打赏
举报


因为你需要在事件内使用事件外的循环变量i。
当事件触发时，那个循环早就结束了，那时的i的值已经是循环最大值加1了。
所以需要用一些方式保存住当前循环的i的值。
方案1为：用闭包保存住当前循环的i的值。
for(var i=0;i<cRes.length;i++) {
	(function(i){
		cRes[i].onclick=function(){
			alert("id为"+this.id+ "的编号为"+i);
		}
	})(i);
}

方案2为：用let块作用域变量，原理也是闭包（ie11以前不支持）
for(var i=0;i<cRes.length;i++) {
	let j = i;
	cRes[i].onclick=function(){
		alert("id为"+this.id+ "的编号为"+j);
	}
}

方案3为：在事件函数内不使用循环变量i，而是用this获取触发事件的元素
for(var i=0;i<cRes.length;i++) {
	cRes[i].index = i;
	cRes[i].onclick=function(){
		alert("id为"+this.id+ "的编号为"+this.index);
	}
}

js循环与局部变量的问题

相关推荐