jq遍历循环，给每个元素添加点击事件，并返回当前元素的索引值（闭包问题）

拼搏现实的明天。 2021-07-25 21:03 416阅读 0赞

## jq循环绑定点击事件造成闭包问题 ##

需求：给每个带有tab类名的元素点击点击事件，点击时可以添加active类名，（用于样式切换），而且还需要返回当前元素对应的索引值：

## 方法一（出现闭包） ##

先引入jq  
jq引入之后的获取dom的方式：  
$(’.tab’) //获取到的是所有含有tab类名的元素，如果想要限制在某个区域内，可以再加个类名的限制。

$('.tab').each(function(index){ 
    	$(this).on('click',function(){ 
    		console.log(index);
    			$('.tab').eq(index).addClass('active');
    	})
    })

执行上面的代码后，出现闭包问题：  
也就是所有的元素点击时，都打印的index为最后一项的索引，而且也只有最后一项添加了active类名。

## 方法二（通过立即执行函数解决闭包问题，将索引值传递到立即执行函数中） ##

$('.tab').each(function(index){ 
    	(function(index){ 
    		$(this).on('click',function(){ 
    		console.log(index);
    			$('.tab').eq(index).addClass('active');
    		})
    	})(index)
    })

通过给循环中的每一项都添加立即执行函数执行，可以解决闭包问题；此时：每一项的点击事件都是可以添加上active类名了，通过立即执行函数中的index将索引传递过去，完美解决问题！

## 方法三（通过bind的方式） ##

//监听左侧的点击事件

完美解决！