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

遇见此问题,代码检查了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);
    });

}