1、一般逻辑,对li标签循环绑定click事件,但会出现“闭包问题”
<ul>
<li style="list-style:none;border: 1px solid gray;">第一个</li>
<li style="list-style:none;border: 1px solid gray;">第二个</li>
<li style="list-style:none;border: 1px solid gray;">第三个</li>
<li style="list-style:none;border: 1px solid gray;">第四个</li>
<li style="list-style:none;border: 1px solid gray;">第五个</li>
<li style="list-style:none;border: 1px solid gray;">第六个</li>
</ul>
<script>
var liArr=document.querySelectorAll('li');
for(var i = 0;i<liArr.length;i++){
liArr[i].οnclick=function(){
alert(i);
}
}
</script>
但是无论单击哪个li,都弹出6,这就是js特性。
2、匿名函数解决
var liArr=document.querySelectorAll('li');
for(var i = 0;i<liArr.length;i++){
(function(k){
liArr[k].onclick=function(){
alert(k);
}
}(i))
}
3、let 声明 解决
var liArr=document.querySelectorAll('li');
for(let i = 0;i<liArr.length;i++){
liArr[i].onclick=function(){
alert(i);
}
}
4、foreach 解决
liArr.forEach(function (ele,idx) {
ele.onclick=function () {
alert(idx);
}
})