JS中批量給元素綁定事件過程中的相關(guān)問題使用閉包解決
在JS中,你寫一個for循環(huán)的時候,內(nèi)部的循環(huán)變量I其實(shí)是會保存在它運(yùn)行的函數(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實(shí)現(xiàn)ul列表項(xiàng)相互飄動效果示例
這篇文章主要介紹了jQuery使用animate實(shí)現(xiàn)ul列表項(xiàng)相互飄動效果,結(jié)合實(shí)例形式分析了jQuery使用animate動畫切換的操作技巧,需要的朋友可以參考下2016-09-09正負(fù)小數(shù)點(diǎn)后兩位浮點(diǎn)數(shù)實(shí)現(xiàn)原理及代碼
需要做個對兩位小數(shù)點(diǎn)的正負(fù)浮點(diǎn)數(shù)的處理要求:非數(shù)字或者.字符自動清除,并對.12自動修補(bǔ).前的0,實(shí)現(xiàn)原理如下,感興趣的朋友可以參考下2013-09-09簡單實(shí)現(xiàn)jQuery進(jìn)度條輪播實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了簡單實(shí)現(xiàn)jQuery進(jìn)度條輪播實(shí)例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-06-06jQuery實(shí)現(xiàn)鼠標(biāo)滑動切換圖片
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑動切換圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-05-05jQuery彈層插件jquery.fancybox.js用法實(shí)例
這篇文章主要介紹了jQuery彈層插件jquery.fancybox.js用法,結(jié)合實(shí)例形式分析了jQuery彈出層插件jquery.fancybox.js的功能、用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-01-01