<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/**for循環立即執行(i值挨個變化,已經執行),for循環里面的alert方法也立即執行(i值挨個變化,已經執行)**/
for (var i = 0; i < $("p").length; i++) {
alert(i);
}
/**for循環立即執行(i值挨個變化,已經執行),for循環里面的點擊事件不立即執行*(i值變成for循環終止值)*/
for (var i = 0; i < $("p").length; i++) {
//eq(i)立即執行,click事件里的方法不立即執行,每個對象發生點擊事件時i都為值length
$("p").eq(i).click(function () {
alert($(this).index() + " ; index: " + i);
});
}
/**解決方法1:將計數器改為用let聲明**/
for(let i =0;i < $("p").length;i++){
$("p").eq(i).click(function(){
alert($(this).index() + " ; index: "+i);
});
}
/**解決方法2:使用閉包**/
for (var i = 0; i < $("p").length; i++) {
$("p").eq(i).click(function (n) {
return function () {
alert($(this).index() + " ; index: "+ n);
}
}(i)); //此處i立即執行,將i作為click事件對應的處理函數的實際參數,並將內部處理過程return出來,迫使click里的兩個function都立即執行
}
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>