代碼:
<body>
<div class="box" id="one">
<div class="hd"> <span class="current">體育</span> <span>娛樂</span> <span>新聞</span> <span>綜合</span> </div> <div class="bd"> <ul> <li class="current">我是體育模塊</li> <li>我是娛樂模塊</li> <li>我是新聞模塊</li> <li>我是綜合模塊</li> </ul> </div>
</div>
<div class="box" id="two">
<div class="hd"> <span class="current">體育</span> <span>娛樂</span> <span>新聞</span> <span>綜合</span> </div> <div class="bd"> <ul> <li class="current">我是體育模塊</li> <li>我是娛樂模塊</li> <li>我是新聞模塊</li> <li>我是綜合模塊</li> </ul> </div>
</div>
</body>
</html>
<script>
// 封裝tab欄 function tab(id) { // 獲取元素,只獲取這個id下面的span和li元素 var eleId = document.getElementById(id);// 獲取id元素 var spans = eleId.getElementsByTagName("span");//4個span var lis = eleId.getElementsByTagName("li");//4個li for(var i=0; i<spans.length;i++) {// 遍歷4個span spans[i].index = i;//給每個span指定一個索引號 spans[i].onmouseover = function() {//鼠標經(jīng)過span元素 //先清除所有的spans和lis的樣式 for(var j = 0;j<spans.length; j++) { spans[j].className = ""; lis[j].className = ""; } this.className = "current";//當前span改變樣式 lis[this.index].className = "current";//當前那個li顯示出來 } } } tab("one"); // 實參 tab("two"); // 實參
問題:tab()函數(shù)調(diào)用兩次,獲取了不同id下的spans和lis元素,同時給每個span元素綁定了事件,當事件觸發(fā)時,執(zhí)行匿名函數(shù),這個時候,在匿名函數(shù)中,它怎么知道spans和lis變量代表的是one元素中的,還是two元素中的呢?tab()函數(shù)執(zhí)行完畢,spans和lis變量釋放了嗎?