JS中使用for循环添加点击事件时，获取i值及参数异常原因及解决办法

本文探讨了JavaScript中闭包的使用误区，特别是在为多个DOM元素绑定点击事件时，如何正确处理循环变量的问题。通过实例展示了不同的解决方案，帮助开发者理解闭包的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇见此问题,代码检查了n次都没毛病,但是却出现下述问题, 坑了我好久,原来是这个原因,记录避坑!

PS这是js的处理方法, 在jquery中直接用each遍历元素绑定点击事件即可避免

$('#id').each(function(i){
	$(this).click(function(){
	 alert(i);							
	});
});

转自 : https://www.cnblogs.com/blogs-8888/p/6437350.html

比如页面上有一个ul，数个li，现在给li添加点击事件。

 
         var  
         li = document.getElementsByTagName( 
         "li" 
         ); 
        
         for 
         ( 
         var  
         i = 0; i < li.length; i++) { 
        
         li[i].addEventListener( 
         "click" 
         , 
         function  
         () { 
        
         console.log(i); 
        
         }) 
        
         }

但是，这样写之后我们发现，点击任何一个li，打印的值都为5，这是因为闭包中共用i值，而i的值由于执行for循环，都变为了5

为了正常显示i值，我们可以使用如下方法:

 
         for  
         ( 
         var  
         i = 0; i < lis.length; i++) { 
        
         ( 
         function 
         (arg){ 
        
         li[arg].onclick =  
         function 
         (){ 
        
         console.log(arg); 
        
         }; 
        
         })(i)   
        
         }

类似于这样

 
         var  
         li = document.getElementsByTagName( 
         "li" 
         ); 
        
         for 
         ( 
         var  
         i = 0; i < li.length; i++) { 
        
         getConsole(i); 
        
         } 
        
         function  
         getConsole(i){ 
        
         li[i].addEventListener( 
         "click" 
         ,  
         function 
         () { 
        
         console.log(i); 
        
         }); 
        
         }