JS:for循环下onclick点击事件的i值捕捉问题

HTML部分代码

<div class="tab_box">

        <ul class="tab_tit">

            <li class="current">tab1</li>

            <li>tab2</li>

            <li>tab3</li>

            <li>tab4</li>

        </ul>

</div>

 JS部分代码

 

var tab_tit = document.querySelectorAll(".tab_box .tab_tit li");
for (var i = 0; i < tab_tit.length; i++) {
    tab_tit[i].onclick = function() {
        console.log("哈哈" + i);
    }
    console.log("i=" + i);
}
console.log("执行完毕之后i=" + i);

 

每次点击实际得到的值为“哈哈4”，即onclick点击事件里面的i=4

 

 这是为什么呢？

解：我们在onclick事件下面也写了一个console.log(i)，每次刷新页面时，console.log("i=" + i)被依次打印，即for循环首先执行，for循环最后一次执行的i变成了3+1=4。即console.log("执行完毕之后i=" + i)所输出的值。

但是onclick事件还没有被触发，一直是待触发状态（待执行状态），等我们点击页面中t        ab1或tab2或tab3或tab4任意一个，onclick事件执行，但是tab_tit[i].onclick的i只是被点击的tab的i，不是console.log("哈哈" + i)中的i，console.log("哈哈" + i)中的i早被赋值成了4。

总而言之，console.log("哈哈" + i)不输出>>哈哈0、哈哈1、哈哈2、哈哈3、只是每次没有被执行罢了。执行的时候已经被赋值成哈哈4了。（同步执行，异步执行问题）

---

如何解决这个问题

1、我们可以用函数闭包

var tab_tit = document.querySelectorAll(".tab_box .tab_tit li");
for (var i = 0; i < tab_tit.length; i++) {
    var j;
    (function(j) {
        tab_tit[j].onclick = function() {
            console.log("哈哈" + j);
        }
    })(i);
}

建立一个function(j)函数，包裹onclick事件，然后整个函数被包裹，然后在function(j)函数后面调用自己，即每一次的for循环都会执行function(j)函数，把每次循环的i变量赋值到function(j)函数里，然后在赋值到onclick整个事件函数里，然后把然后系统存档每一次的function(j)，这样就可以解决整个onclick函数中的两个j不相等的问题。因为没在function(j)函数里写console.log(j)，所以你不知道他已经存档了。然后去HTML点击tab标签，就会调用相应的onclick点击事件。

 

 

2、在JS中给HTML的tab标签加属性值

var tab_tit = document.querySelectorAll(".tab_box .tab_tit li");
for (var i = 0; i < tab_tit.length; i++) {
    tab_tit[i].index = i;
    tab_tit[i].onclick = function() {
        console.log("哈哈" + this.index);
    }
}

在onclick时间之前加一个tab_tit[i].index=i的属性，该行代码会在HTML的tab_tit[i]中加index="i"的属性，然后点击相应的tab，输出this.index的值。