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裏的索引值是循環結束後的最終值？？？一直不是很明白，求高人指點！！！