【转】解决for循环中只能点击到最后一个元素的问题

hundan_520520

已于 2022-09-26 16:11:54 修改

阅读量1.3k

点赞数

分类专栏：前端文章标签： JavaScript

于 2019-12-04 17:33:39 首次发布

原文链接：https://blog.csdn.net/tiantiandashi/article/details/80935905

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

有时候我们需要对一排元素进行逐一选中，比如下面一个例子中，我们想要当点击一排按钮中的某一个时，利用下面的写法，都是只能弹出最后一个元素。

 <body>
	<button>按钮1</button>
	<button>按钮2</button>
	<button>按钮3</button>
	<button>按钮4</button>
	<button>按钮5</button>
	
	<script>
		var btns = document.getElementsByTagName('button');
		for(var i=0;i<btns.length;i++){
			btns[i].οnclick=function(){
				alert('点击了第'+ i +'个按钮');
			}
		}
	</script>
</body>

结果，无论我点击哪一个按钮，都是第五个：
在这里插入图片描述
以上产生的原因是因为作用域的问题

解决办法1：利用闭包解决

将for循环改成以下方式便可：

for(var i=0;i<btns.length;i++){		
	  (function(i){			
		btns[i].οnclick=function(){
		alert('点击了第'+ i +'个按钮');
	        }			
	})(i)
}

解决办法2：利用es6语法解决

将声明变量的方式从‘var ’改成 ‘let’ 便可。

如 var btns  =》 let btns； var i    =》  let i

hundan_520520

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【转】解决for循环中只能点击到最后一个元素的问题

有时候我们需要对一排元素进行逐一选中，比如下面一个例子中，我们想要当点击一排按钮中的某一个时，利用下面的写法，都是只能弹出最后一个元素。 <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>...
复制链接

扫一扫