for循环数组i的正确取值

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{ margin:0; padding:0;}
ul{ list-style:none; overflow:hidden}
li{ width:200px; height:50px; overflow:hidden; border:1px solid;}
</style>
</head>

<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
var Ary = document.getElementsByTagName("li");
function init(){
    for(var i = 0; i < Ary.length; i++){
        Ary[i].onclick = function(){
            console.log(i);
        };
    };
};

//将变量i保存给每个段落对象li上 Ary[i].i = i
function solve(){
    for(var i = 0; i < Ary.length; i++){
        Ary[i].i = i;
        Ary[i].onclick = function(){
            console.log(this.i);
        };
    };
};

//将变量i保存在匿名函数自身(function).i = i
function solve2(){
    for(var i = 0; i < Ary.length; i++){
        (Ary[i].onclick = function(){
            console.log(arguments.callee.i);
        }).i = i;
    };
};

//闭包,i以函数参数形式传递给内层函数(function(n){})(i)
function solve3(){
    for(var i = 0; i < Ary.length; i++){
        (function(n){
            Ary[i].onclick = function(){
                console.log(n);
            };
        })(i);
    };
};

//闭包,i以局部变量形式传递给内存函数
function solve4(){
    for(var i = 0; i < Ary.length; i++){
        (function(){
            var tmp = i;
            Ary[i].onclick = function(){
                console.log(tmp);
            };
        })();
    };
};

//闭包,返回一个函数作为响应事件
function solve5(){
    for(var i = 0; i < Ary.length; i++){
        Ary[i].onclick = function(n){
            return function(){
                console.log(n);
            };
        }(i);
    };
};

//用Function实现,实际上每产生一个函数实例就会产生一个闭包
function solve6(){
    for(var i = 0; i < Ary.length; i++){
        Ary[i].onclick = new Function("console.log(" + i + ")");
    };
};

function solve7(){
    for(var i = 0; i < Ary.length; i++){
        Ary[i].onclick = Function("console.log(" + i + ")");
    };
};

window.onload = solve7;
</script>
</body>
</html>
posted @ 2012-11-12 16:50  Joerias  阅读(478)  评论(0编辑  收藏  举报