变量范围, 奇怪的有关问题 ━━━━━━━━

变量范围, 奇怪的问题 ━━━━━━━━
<div   id= "a "> aa </div>
<div   id= "b "> bb </div>
<div   id= "c "> cc </div>

<script>
function   foo(arr)
{
var   grade   =   arr.length;

for   (var   i=0;   i <grade;   i++)   {

arr[i].onclick   =   function()   {
alert(i);
}
}
}

foo([document.getElementById( 'a '),   document.getElementById( 'b '),   document.getElementById( 'c ')]);
</script>

----------------

奇怪,   点击aa,bb,cc始终是弹出3,   我怎么样才能达到预想结果使其分别弹出1,2,3呢?

------解决方案--------------------
<div id= "a "> aa </div>
<div id= "b "> bb </div>
<div id= "c "> cc </div>

<script>
function foo(arr)
{
var grade = arr.length;

for (var i=0; i <grade; i++) {

arr[i].onclick = new Function( "test( ' "+i+ " ') ")

}
}
function test(i){
alert(i);
}

foo([document.getElementById( 'a '), document.getElementById( 'b '), document.getElementById( 'c ')]);
</script>
------解决方案--------------------
http://community.csdn.net/Expert/TopicView3.asp?id=5693553