【转】解决for循环中只能点击到最后一个元素的问题_js的for循环动态渲染html只有最后一个元素生效怎么解决

作者：我家小花儿 | 2024-06-28 19:09:47

踩

js的for循环动态渲染html只有最后一个元素生效怎么解决

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

 <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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

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

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

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

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

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/767036