JS中批量給元素綁定事件過程中的相關(guān)問題使用閉包解決
更新時間：2013年04月15日 15:07:18 投稿：whsnow
解決元素批量綁定事件的時候，出現(xiàn)i=最后一個循環(huán)變量的值的方法有兩種：把這個循環(huán)變量保存起來，不要讓它的作用域在整個函數(shù)，而是在循環(huán)體內(nèi)
在JS中，你寫一個for循環(huán)的時候，內(nèi)部的循環(huán)變量I其實是會保存在它運行的函數(shù)或類內(nèi)的，所以你會發(fā)現(xiàn)你給元素批量綁定事件的時候，出現(xiàn)i=最后一個循環(huán)變量的值，解決的方案有2鐘，
思路就是：把這個循環(huán)變量保存起來，不要讓它的作用域在整個函數(shù)，而是在循環(huán)體內(nèi)
1.使用閉包(如果你不懂閉包，請打開百度：www.baidu.com)
2.使用with關(guān)鍵字，with語法是with( obj ) { //使得可以在此直接訪問obj的屬性，而不用加obj.XXX }
代碼示例：
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="jquery-1.7.2.js" ></script>
<script type="text/javascript" language="javascript">
$(document).ready(function (){
function Ev(i){
this.index = i;
this.click = function (){
alert(this.index );
}
}
for(var k=1; k<4; k++){
//閉包函數(shù)1
// (function(x){
// $("#div" + x).click(function(){
// f(x);
// });
// }(k));
//使用with關(guān)鍵字
with ({i: k}){
$("#div" + i).click(function(){
f(i);
});
}
}
var f = function (m){
alert(m);
}
});
</script>
</head>
<body>
<div id="div1">1
</div>
<div id="div2">2
</div>
<div id="div3">3
</div>
</body>
</html>
相關(guān)文章
jQuery使用animate實現(xiàn)ul列表項相互飄動效果示例
這篇文章主要介紹了jQuery使用animate實現(xiàn)ul列表項相互飄動效果,結(jié)合實例形式分析了jQuery使用animate動畫切換的操作技巧,需要的朋友可以參考下2016-09-09
正負小數(shù)點后兩位浮點數(shù)實現(xiàn)原理及代碼
需要做個對兩位小數(shù)點的正負浮點數(shù)的處理要求：非數(shù)字或者.字符自動清除，并對.12自動修補.前的0，實現(xiàn)原理如下，感興趣的朋友可以參考下2013-09-09
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)圖片切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
為了提高用戶體驗度，我們通常會給出 “正在處理，請稍等！”諸如此類的提示。我們可通過設(shè)置$.ajax()下的參數(shù)beforeSend()來實現(xiàn)2014-09-09
這篇文章主要介紹了jQuery條件分頁代替離線查詢，通過代碼實例讓讀者更深入了解該功能的操作，具體操作步驟大家可查看下文的詳細講解，感興趣的小伙伴們可以參考一下。2017-08-08
這篇文章主要為大家詳細介紹了簡單實現(xiàn)jQuery進度條輪播實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)大屏滾動播放效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了jQuery簡單實現(xiàn)遍歷單選框的方法,涉及jQuery針對頁面表單元素的遍歷及事件響應相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)鼠標滑動切換圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
jQuery彈層插件jquery.fancybox.js用法實例
這篇文章主要介紹了jQuery彈層插件jquery.fancybox.js用法,結(jié)合實例形式分析了jQuery彈出層插件jquery.fancybox.js的功能、用法與相關(guān)注意事項,需要的朋友可以參考下2016-01-01