关于前端:轮播图或者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';        
    })
}