javascript中的for循环细节问题

来源：互联网发布：免费版进销存软件编辑：程序博客网时间：2024/06/15 21:38

注意for 循环变量的初始化，我发现变量初始化位置不对，结果出错，代码如下

<html><head><meta charset="utf-8"/><title></title><style type="text/css">*{padding:0;margin:0;font-size: 14px;list-style: none;}.wrap{width:200px;margin: 10px auto;border: 1px solid #ccc;}.current{background-color: #fff;}.tit{color::#fff;height:20px;line-height: 20px;margin: 0 auto;background-color: #888;}.tit ul li{width:25%;float:left;height:20px;}.a{padding-left: 10px;display: none;}.active{padding-left: 10px;display: block;}</style><script type="text/javascript">window.onload=function(){var tit=document.getElementById('tit');var titLis=tit.getElementsByTagName('li');var conUls=document.getElementById('con').getElementsByTagName('ul');// var i =0;如果变量在这里定义的话，嵌套的for循环只执行两次，// var j=0;var index;for(var i=0;i<titLis.length;i++){//在这初始化结果正确titLis[i].index=i;titLis[i].onmouseover=function(){for(var j=0;j<titLis.length;j++){titLis[j].className='';conUls[j].className='a';}this.className="current";conUls[this.index].className='active';}}}</script></head><body><div class="wrap"><div class="tit" id="tit"><ul><li class="current">遇见</li><li>天黑黑</li><li>逆光</li><li>绿光</li></ul></div><div id="con"><ul class="active"><li>遇见</li><li>天黑黑</li><li>逆光</li><li>绿光</li></ul><ul class="a"><li>天黑黑</li><li>遇见</li><li>逆光</li><li>绿光</li></ul><ul class="a"><li>逆光</li><li>天黑黑</li><li>遇见</li><li>绿光</li></ul><ul class="a"><li>绿光</li><li>天黑黑</li><li>逆光</li><li>遇见</li></ul></div></div></body></html>

0 0