JS一个很是经典的问题：在遍历数组时对DOM监听事件，索引值将始终等于遍历结束后的值

一个简单的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里的索引值是循环结束后的最终值？？？一直不是很明白，求高人指点！！！