三个按钮,希望点击第一个按钮显示 0,第二个按钮显示 1,第三个按钮显示 2。怎么做呢?
<input
type="button"
id="b0"
value="0"
/>
<input type="button" id="b1" value="1" />
<input type="button" id="b2" value="2" />
<script type="text/javascript" src="http://www.cftea.com/js/ezj_v2.9/ezj.js" > </script >
<script type="text/javascript" >
<!--
for ( var i = 0; i < 3; i++)
{
$( "b" + i). click( function(){
alert(i);
});
}
//-->
</script >
<input type="button" id="b1" value="1" />
<input type="button" id="b2" value="2" />
<script type="text/javascript" src="http://www.cftea.com/js/ezj_v2.9/ezj.js" > </script >
<script type="text/javascript" >
<!--
for ( var i = 0; i < 3; i++)
{
$( "b" + i). click( function(){
alert(i);
});
}
//-->
</script >
以上代码是错误的,因为不论点哪个按钮,都是显示 3。
这是由于 i 经过 for 循环后,变成了 3,再点击按钮,始终用的是 i 的最终值,那如下代码是不是正确了呢?
for (
var i = 0; i < 3; i++)
{
var m = i;
$( "b" + i). click( function(){
alert(m);
});
}
{
var m = i;
$( "b" + i). click( function(){
alert(m);
});
}
也不对,这个闭包的 m 在 alert 所处的 function 之外,也就是说不受 function 保护,仍会受到 for 循环的改变,function() 中的 m 值永远是外层 m 的最后值,点任何一个按钮都会显示 2(i 在循环内的最后值)。
正确的做法
for (
var i = 0; i < 3; i++)
{
( function(i){
$( "b" + i). click( function(){
alert(i);
})
})(i);
}
// 等效于下面的:
for ( var i = 0; i < 3; i++)
{
function f(i)
{
$( "b" + i). click( function(){
alert(i);
})
}
f(i);
}
{
( function(i){
$( "b" + i). click( function(){
alert(i);
})
})(i);
}
// 等效于下面的:
for ( var i = 0; i < 3; i++)
{
function f(i)
{
$( "b" + i). click( function(){
alert(i);
})
}
f(i);
}
注意 function(i) 中的 i 不能省略,否则 alert(i) 仍然是 for 循环的 i。
另外还有一种方法,和上面的代码是一个道理,不过是借助了 ezj 中,click 可以向事件处理程序传送 DOM 对象的原理,我们可以发现 click 中的 function() 变成了 function(e)
for (
var i = 0; i < 3; i++)
{
var b = $( "b" + i);
b.alertText = i;
b. click( function(e){
alert(e.alertText);
});
}
备注: ------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------
简言之,闭包是产生一个没有被释放资源的栈区。换言之,就是一个不可控的内存空间占用,如果与事件相关联,JS的垃圾回收机制也不会去触碰该区域。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
{
var b = $( "b" + i);
b.alertText = i;
b. click( function(e){
alert(e.alertText);
});
}
备注: ------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------
简言之,闭包是产生一个没有被释放资源的栈区。换言之,就是一个不可控的内存空间占用,如果与事件相关联,JS的垃圾回收机制也不会去触碰该区域。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------