首页 新闻 搜索 专区 学院

javascript中,for循环做无作用遍历的意义是什么?

0
悬赏园豆:20 [已解决问题] 解决于 2017-01-03 16:57

文科女生刚开始自学前端,对于for循环套for循环很是迷惑,看到网上别人制作的年历,有个地方不理解,源代码是这样的:

for(i=0;i<aBtn.length;i++)
    {
        aBtn[i].index=i;
        aBtn[i].onmouseover=function ()
        {
            for(i=0;i<aBtn.length;i++)
            {
                aBtn[i].className='';
            }
            this.className='active';
            oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+aDatas[this.index]+'</p>';
        };
    }

我想问下最外面那个for循环遍历是什么意思?假如说我鼠标over到第3个,即i=2,那么里面那个onmouseover事件得到了执行,即所有的月份按钮的classname都清空,紧接着当前over的这个按钮的classname被设置成了active,然后下面的文本内容也转换了。可是外面还有个大的for循环,所以循环继续,i变成3,同时属性Index的值变成3,假如这时候我鼠标不over到任何月份按钮,下面的onmouseover事件就不会执行,所以直接跳到i++,i变成4,同样鼠标不over到任何月份按钮上,一直到i变成12.退出外面的for循环,程序结束。过了几秒我鼠标再次over到另外一个月份按钮上,那么同样的事情将被继续执行一遍。可是我就不明白外面的for循环做了那么多次循环的意义在哪里,我不知道这个外层for循环的作用是什么?还请前辈们解答

kiravalerie的主页 kiravalerie | 初学一级 | 园豆:176
提问于:2016-12-09 23:46
< >
分享
最佳答案
0

最外层的循环是用来给所有的aBtn绑定onmouseover事件用的,只执行一次。假设有3个按钮,即aBtn.length等于3,那么最外层的循环就给这3个按钮绑定了onmouseover事件。运行完这段代码后,实际上就变成了:

aBtn[0].onmouseover = function(){}
aBtn[1].onmouseover = function(){}
aBtn[2].onmouseover = function(){}

onmouseover只有鼠标移上去才会触发,在最外层for循环时是不触发的,所以不用考虑里面的i。当触发onmouseover时,外层的循环早已执行完了。或者换一种写法:

for(i=0;i<aBtn.length;i++)
{
        aBtn[i].index=i;
        aBtn[i].onmouseover=function ()
        {
            for(var j=0;j<aBtn.length;j++)
            {
                aBtn[j].className='';
            }
            this.className='active';
            oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+aDatas[this.index]+'</p>';
        };
}

把内层循环的变量i换成j就好理解了。

收获园豆:20
逐影 | 小虾三级 |园豆:998 | 2016-12-10 00:09

谢谢前辈的解答,那意思是外层for循环不受里面onmouseover事件的影响吗?按照我有限的知识理解,for循环也好,什么流程控制语句也好,是不能自己就自发执行的,必须要有外部比如事件触发,或者调用才能执行。因为我目前看到的例子是都是这样的。可是这个代码段外面的for循环没有任何外部触发事件或者调用,怎么自己就执行了一遍呢?除了里面的index需要用到外面的i的值,而且外层执行情况跟里层会有什么逻辑联系?现在我看了您的解答,等到over到某一个按钮的时候,外层for早就都执行完了,那个i的值早就变成length长度而结束了,那怎么产生联系啊

kiravalerie | 园豆:176 (初学一级) | 2016-12-10 00:40

@kiravalerie: 不管这段代码放在哪一行,当浏览器解析到那一行时这段代码就会执行。比如在页面中加入

for(var i = 0; i < 3; i++) {
    alert(i);
}

运行结果依次弹出0~2。onmouseover只是把事件注册上,告诉浏览器它准备响应你的鼠标事件,但实际上你没动鼠标,所以里面的代码暂时不会执行直到你把鼠标移动到目标元素上。外层循环执行完了以后,为3个按钮注册了3个onmouseover事件,准备响应你的操作,同时这3个按钮还多了以下属性:

aBtn[0].index = 0;
aBtn[1].index = 1;
aBtn[2].index = 2;

到这里外层循环的作用就完成了(在内循环访问index是直接得到它们的值0、1、2而不是再去读取i),当触发onmouseover事件时,外层循环早已结束,跟i变量也没有什么关系了。所以上面的代码在内层循环可以用变量j来代替i,就是表示内层循环的i和外层的i没有关系。但j的值也是从0到2,所以取到的仍然是aBtn[0],aBtn[1],aBtn[2],它们的index值也是从0到2。

不知道描述得是否清晰,因为我也是个初学者,不是什么前辈。

逐影 | 园豆:998 (小虾三级) | 2016-12-10 11:14

@逐影: 非常谢谢您的解答,我好像理解了,我有一段时间没有登录博客园了,刚刚才看到,非常感谢

kiravalerie | 园豆:176 (初学一级) | 2017-01-03 16:52
其他回答(3)
0

理解下闭包

jello chen | 园豆:7096 (大侠五级) | 2016-12-10 12:55

谢谢您的回复,最近刚开始接触闭包,感觉是个理解难点呢

支持(0) 反对(0) kiravalerie | 园豆:176 (初学一级) | 2017-01-03 16:58

大神,不过我还是有点好奇这个代码块怎么跟闭包联系上了,我目前理解的闭包是在函数里嵌套了一个函数,或者说是函数的返回值是一个函数。可是这个没有嵌套一个函数啊

支持(0) 反对(0) kiravalerie | 园豆:176 (初学一级) | 2017-01-03 17:27
0

for(i=0;i<aBtn.length;i++)
{//遍历每一个按钮
aBtn[i].index=i;//给每一个按钮设置索引,以便操作的时候知道这是第几个按钮
aBtn[i].onmouseover=function ()//给每个按钮添加鼠标经过事件
{
for(i=0;i<aBtn.length;i++)
{//先取消所有按钮的鼠标悬停的样式
aBtn[i].className='';
}
this.className='active';//给当前按钮添加鼠标悬停的样式
oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+aDatas[this.index]+'</p>';//通过this.index得到当前点击的按钮的索引值,以便显示跟这个按钮相关的内容。
};
}

jasondyoung | 园豆:424 (菜鸟二级) | 2016-12-11 13:39

谢谢您的解答,非常感谢

支持(0) 反对(0) kiravalerie | 园豆:176 (初学一级) | 2017-01-03 17:00

@kiravalerie: 。。真是努力

支持(0) 反对(0) jasondyoung | 园豆:424 (菜鸟二级) | 2017-01-03 17:32
0

当我看到"文科女生"四个字的时候,我相信问题一定能解决的。。

另外,你说的那个外层for循环为啥会执行,我感觉是你那个for循序没放function里面吧,如果是直接:

<script>

for(){}

<script>

而不是

<script>

function me(){

for(){}

}

</script>

那直接就执行了。

大水煮鱼 | 园豆:366 (菜鸟二级) | 2017-01-03 09:20

感谢回复,不过我好像没懂你在说什么(⊙o⊙)…

支持(0) 反对(0) kiravalerie | 园豆:176 (初学一级) | 2017-01-03 17:02

@kiravalerie: (⊙*⊙)…

支持(0) 反对(0) 大水煮鱼 | 园豆:366 (菜鸟二级) | 2017-01-03 21:15
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册