循环问题中索引求解

Question

for(var i= 0,len = oLis.length;i<len;i++){                 oLis[i].index=i;                 oLis[i].onclick = function() {                     for(var n= 0;n<len;n++){                         oLis[n].className = "";                         oDivs[n].className = "hide";                     }                     this.className = "on";                     oDivs[this.index].className = "";                 }             };为什么要用到索引？直接这样为什么不行？for(var i= 0,len = oLis.length;i<len;i++){                 oLis[i].onclick = function() {                     for(var n= 0;n<len;n++){                         oLis[n].className = "";                         oDivs[n].className = "hide";                     }                     this.className = "on";                     oDivs[i].className = "";                 }             };

Answer 1

你可以自己尝试分析一下执行过程。
这里我说一下，先进行遍历，同时为oLis[i]绑定点击事件监听，
然而，for循环执行完毕后，点击事件并未出发，而i的值变为oLis.length，因为i为全局作用域变量

当我们触发点击事件时，执行回调函数，此时是执行的是

oLis[i].onclick = function() {
    //此时i已经变为了oLis.length
     oDivs[oLis.length].className = "";
}，

所以，需要保存当前遍历添加监听元素的下标到元素的index属性中，方便在之后查找到对应得元素。

可以这样写：

for(var i= 0,len = oLis.length;i<len;i++){
      (function(i){//IIFC(即时执行函数，并隔离i的作用域)
           oLis[i].onclick = function() {
                     for(var n= 0;n<len;n++){
                         oLis[n].className = "";
                         oDivs[n].className = "hide";
                     }
                     this.className = "on";
                     oDivs[i].className = "";
                 }
      })(i)
 };

ES6的话：

for(let i= 0,len = oLis.length;i<len;i++){//块级作用域声明let，存在兼容性，了解即可
       oLis[i].onclick = function() {
            for(var n= 0;n<len;n++){
                 oLis[n].className = "";
                 oDivs[n].className = "hide";
             }
             this.className = "on";
             oDivs[i].className = "";
        }
 };