JS分别给数组元素加onclick，出现些小问题，求解~

本帖最后由 silence_xhn 于 2011-10-21 01:01:37 编辑

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<script>
window.onload = function()
  {
    var btn = document.getElementsByTagName("input");
    for(var i=0;i<btn.length;i++){
            btn[i].onclick = (function(n){
                return function(){alert(btn[n].value);}
            })(i)
    }
  }
</script>
<body>
<input type="button" value="button1"/>
<input type="button" value="button2"/>
<input type="button" value="button3"/>
<input type="button" value="button4"/>
</body>
onclick执行的时候变量i（作用范围在循环）已经不存在了
楼上各位的解释有点误人子弟奥！
1 onclick的function能够访问父函数作用域变量i和btn,这个叫闭包！
2 之所以btn[i]未定义是因为此时的i==4，可以用btn[0]->btn[3]试验下就知道了，按照楼主的程序逻辑应该能实现楼主想要的功能，但问题在闭包上，闭包有个弊端，在这个程序里表现为只能保留i的最终值4，因为所有i都是同一个变量的引用（具体请详查闭包的原理）
3 不必如二楼如此麻烦，传入this参数就行：alert(this.value);
1楼是正解，不过循环过后此时i已经为4，所以会出现btn[i]的错误，
直接用this是个简单的方法。。window.onload = function()
  {
    var btn = document.getElementsByTagName("input");
    for(var i=0;i<btn.length;i++){
            btn[i].onclick = function(){
                alert(this.value);
            }
    }
  }
//当然换种方法也行
/*   for(var i=0;i<btn.length;i++){
            btn[i].i=i;
            btn[i].onclick = function(){
                alert(btn[this.i].value);
            }
    }
*/
我觉得你们和楼主说闭包，楼主并不能理解的。。简单陈述一下,看下面例子var els = document.getElementsByName("text");for (var i = 0, j = els.length; i < j; i++){
  els.onclick = function(){
  alert(i);
  }
}这样做，每次alert出来的都只是i最后的值，这是因为js并没有java那种"块状作用域"
块状作用域简单举例就是，如
java:
for(int i = 0; i < 10; i++){

}
System.out.plant(i);//在这里面是访问不到i的而在js里面
for(var i = 0; i < 10; i++){
  //scope
}
alert(i);//这里访问到得是i最后的值，这是因为这个例子与以下例子是等价的var i = 0
for(; i < 10; i++){

}
alert(i);在for循环声明i与在外面声明都是一样的，因此当我们触发onclick事件的时候，获取到得值是循环完毕后的i
btn[i].onclick = (function(n){
                return function(){alert(btn[n].value);}
            })(i)闭包外又是一个闭包，闭包函数保存了外部的函数作用域，这里外面又加一个闭包，就防止了访问的都是最终的i了
  alert(this.value);