学习轮播图的时候,在操作动静生成管制滚动图的按钮(小圆圈按钮)时发现了一个问题。
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'; })}