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

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的方式）

//监听左侧的点击事件

var tabArr = $('.tab');
for (var i = 0; i < tabArr.length; i++) {$(tabArr[i]).bind("click", { index: i }, clickHandler);
}
function clickHandler(event) {var i = event.data.index;$('.tab').eq(i).addClass('active');$('.tab').eq(i).siblings().removeClass('active');
}

完美解决！

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

JQuery 动态生成元素添加点击事件
页面代码 <html> ... <body> <div id="divBox"></div> <script> $(fu ...
为未来元素添加点击事件的两种写法
哈哈哈,小七来了,对于经常搬砖撸代码的猴子们,一定会遇到给好多li(死的还是动态字符串拼接生成的(对未来元素添加不到事件的看之前写的事件委托))添加点击事件第一种: var index=0; for ...
js中怎么为同级元素添加点击事件
事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好.元素添加事件是js语言中最基础的.我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子 ...
JavaScript实现动态添加的元素添加点击事件
在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可.动态添加的元素怎么绑定事件呢? 原生JavaScript ...
给父元素添加点击事件时，获取到的 event.target 为子元素（point-events: none 的妙用）
目录场景分析解决场景使用 ion-select 组件时,点击下拉图标点击事件的 event.target,不是图标本身的 DOM,而是图标子元素的 DOM 这会导致 popover 无法计 ...
elementUI使用之table表格如何给行元素添加点击事件
官方文档提供的event事件在代码中绑定事件在methods中写方法好了,这样就可以实现了.
通过js动态为标签元素添加点击事件
最近遇到了,就研究了下,总结了下: 我所知道的有如下几种方式: var submitSpan = document.getElementById("submitSpan");第一种 ...
css中为伪元素增加点击事件和hover
鼠标悬停在父元素上面时为伪类元素增加样式  <div class="father"></div><style ...
如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换
如何给Vue v-for循环渲染出的元素批量添加点击事件及点击后添加css类样式及点击后路由跳转切换能够实现或解决的问题给Vue v-for循环出的元素批量添加点击事件,并以自己在数组中 ...