循环问题中索引求解

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 = "";         }  };