您的位置:首页 > Web前端 > JavaScript

JS一个非常经典的问题:在遍历数组时对DOM监听事件,索引值将始终等于遍历结束后的值

2015-05-05 16:38 633 查看
一个简单的Tab选项卡点击事件。

<style type="text/css">
ul{padding:0;margin:0;}
.tab{width:400px;}
.tab-menuWrapper{padding-left:20px;}
.tab-menuWrapper li{float:left;display:inline;padding:5px;border:1px solid #333;border-bottom:none;margin-right:5px;}
.tab-contentWrapper{border:1px solid #333;clear:left;padding:5px;}
</style>
<div class="tab">
<ul class="tab-menuwrapper">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
<div class="tab-contentwrapper">
<div>content1</div>
<div style="display:none">content2</div>
<div style="display:none">content3</div>
</div>
</div>


  然后我们需要一点js来实现,鼠标点击时content内容的切换。

<script type="text/javascript">
var tabMenu=document.getElementById("tab-menuWrapper").getElementsByTagName("li");
var tabContent=document.getElementById("tab-contentWrapper").getElementsByTagName("div");
for(var i=0;i<tabmenu .length;i++){
  tabMenu[i].onclick=function(){
    for(var j=0;j<tabContent.length;j++){
     tabContent[j].style.display="none";
    }
    tabContent[i].style.display="block";
  }
}
</script>


  我们希望借助于数组和循环来完成这个任务,但是我们发现上述代码不能完成我们的任务,会报错:“tabContent[i] is undefined”. 我们利用alert(i)检测一下。

for(var i=0;i<tabmenu .length;i++){
  tabMenu[i].onclick=function(){
    alert(i);   //3,3,3 why???
    for(var j=0;j<tabContent.length;j++){
      tabContent[j].style.display="none";
    }
    tabContent[i].style.display="block";
  }
}


  当我们点击tabMenu1,2,3时,不是弹出0,1,2而是弹出3,3,3。所以后面的tabContent[i]会是undefined。(tabContent[i]中i实际上只有0,1,2)解决这个问题,我们可以使用闭包。

for(var i=0;i</tabmenu><tabmenu .length;i++){
(function(_i){
  tabMenu[_i].onclick=function(){
    for(var j=0;j<tabContent.length;j++){
      tabContent[j].style.display="none";
    }
    tabContent[_i].style.display="block";
  }
})(i);
}


  或者我们给DOM节点添加_index属性,属性值等于索引:

for(var i=0;i</tabmenu><tabmenu .length;i++){
tabMenu[i]._index=i;
tabMenu[i].onclick=function(){
for(var j=0;j<tabContent.length;j++){
tabContent[j].style.display="none";
    }
  tabContent[this._index].style.display="block";
  }
}


  虽然解决了问题。但是为什么在onclick里的索引值是循环结束后的最终值???一直不是很明白,求高人指点!!!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐