关于前端:轮播图或者tab切换时会遇到js循环给dom元素添加绑定事件时事件执行函数里面的i值需要注意的问题

学习轮播图的时候，在操作动静生成管制滚动图的按钮（小圆圈按钮）时发现了一个问题。
1. 想要实现的成果：给以后点击的 li 加 current 类款式（红色背景色）

2. 问题代码如下：

var ol = focus.querySelector('.circle');    
for(var i = 0; i < ul.children.length; i++){
    //ul 为盛放轮播图片的容器，圆圈 li 的个数由图片个数决定
    var li = document.createElement('li');                
    ol.appendChild(li);
    li.addEventListener('click',function(){// ol.children[i].className='current'; 为什么会报错呢
        console.log(ol.children[i])// 输入 undefined
        console.log(i)// i 输入为 4        
    })
}

3. 发现的问题：
（1）我在给 li 的绑定事件执行函数外面：给以后的 li 增加 current 类款式，然而写上面这句代码 ol.children[i].className=’current’; 报以下谬误

而后我打印了 ol.children[i]，输入为 undefined。接着打印了 i, 输入为 4。
我的了解：首先点击事件触发的时候，循环必定曾经执行完了，那么 i 必定是最初一次循环的值了。
（2）从效果图能够看到外面有 4 个 li, 最大应该是 3，为什么是 4 呢？
我的了解：for 循环先是初始化 i 的值，而后判断条件，符合条件之后执行外面的代码，前面就是执行 i ++，而后判断条件，符合条件再执行外面的代码。当 i 等于 3 时，判断条件 i <4，而后继续执行循环里的代码，而后 i ++，这时 i 变为了 4，4 不小于 4，循环完结。尽管循环里的代码没有执行，然而 i 曾经自增了，所以 i 的值为 4 不是 3.

4. 批改后的代码：

var ol = focus.querySelector('.circle');    
for(var i = 0; i < ul.children.length; i++){var li = document.createElement('li');                
    ol.appendChild(li);
    li.addEventListener('click',function(){for(var i = 0;i<ol.children.length ;i++){ol.children[i].className = '';
        }
        this.className='current';        
    })
}