javascript - 事件中的打印循環變量的值時，為什么是一個固定值。
問題描述
<!doctype html><html lang='en'><head> <meta charset='UTF-8'> <title>tab選項卡</title> <style>*{ padding:0; margin:0; list-style:none; font-size:12px;}body{ background-color:#eee;}#tabs{ width:300px; margin:50px auto; background-color:#fff;}#title ul{ overflow:hidden;}#title li{ float:left; width:60px; text-align:center; line-height:30px;}#title li.on{ border-bottom:2px solid red; font-weight:bold;}#content{ padding:10px;}#content ul{ display:none;}#content li{ line-height:25px;} </style></head><body> <p id='tabs'><p id='title'> <ul><li class='on'>公告</li><li>規則</li><li>論壇</li><li>安全</li><li>公益</li> </ul></p><p id='content'> <ul style='display:block;'><li>阿里蘇寧發布'新三體'戰略 打造未來十年格局</li><li>高誠信會員無條件信任 200余萬廣告商品被處罰</li> </ul> <ul><li>出售假冒商品規則變更 商品發布數量限制變更</li><li>中國質造市場管理規范變更 淘寶網營銷規則變更</li> </ul> <ul><li>淘寶招募賣家志愿者 阿里推出兼職神器</li><li>700家熱風淘寶路 是賺錢還是騙子</li> </ul> <ul><li>淘寶用戶必備神器 賣家賬戶安全9守則</li><li>支付寶實名認證信息 賬戶沒錢也被騙？</li> </ul> <ul><li>阿里聯合公益計劃啟動 一圖看懂聯合公益計劃</li><li>公益寶貝賣家發票索取 公益機構淘寶開店攻略</li> </ul></p> </p> <script type='text/javascript'>var li = document.getElementById(’title’).getElementsByTagName(’li’);var ul = document.getElementById(’content’).getElementsByTagName(’ul’);console.log(ul);console.log(li);for (var i = 0,len = li.length; i < len; i++){ li[i].index = i; li[i].onmouseover = function (){for (var j = 0; j < len; j++ ){ li[j].removeAttribute(’class’);}this.className = 'on';for (var c = 0; c < len; c++) { ul[c].style.display = 'none'; //ul[c].setAttribute(’style.dispaly’,’none’);}ul[this.index].style.display = 'block';console.log(i); } console.log(i);} </script></body></html>
問題解答
回答1：onmouseover綁定的是一個事件回調函數，只有觸發事件時才會執行該回調函數，但在此之前循環已經結束，所以每次觸發事件得到的都是最后的值（i=5），解決此問題可以采用IIFE（立即執行函數），如下
for (var i = 0,len = li.length; i < len; i++){ li[i].index = i; // do something... li[i].onmouseover = (function (index){console.log(index); })(i) console.log(i);}回答2：
沒看錯的話，后面那個i變量已經在循環外，之前賦值已經被替換掉了。如果想全部存儲，請申明為json或者拼接字符串
回答3：for (var i = 0,len = li.length; i < len; i++){ li[i].index = i; //修改成如下試試 li[i].onmouseover = (function (i){for (var j = 0; j < len; j++ ){ li[j].removeAttribute(’class’);}this.className = 'on';for (var c = 0; c < len; c++) { ul[c].style.display = 'none'; }ul[this.index].style.display = 'block';console.log(i); })(i);}
網公網安備