<body onload="init()"> <p id="p0">0</p><p id="p1">1</p><p id="p2">2</p><p id="p3">3</p><p id="p4"
<body onload="init()"> <p id="p0">0</p> <p id="p1">1</p> <p id="p2">2</p> <p id="p3">3</p> <p id="p4">4</p> </body>
基于上段代码实现点击每一个p元素输出相应的数字
0
1
2
3
4
1、通过添加数组的属性实现
function init(){ var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ){ pAry[i].i = i; pAry[i].onclick=function(){ console.log(this.i); } } }
2、通过添加到数组的方法的属性上实现
function init() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { (pAry[i].onclick = function() { console.log(arguments.callee.i); }).i = i; }}
3、每执行一次代码产生一个新的arg变量,每次存在数组中的函数记录的需要访问的arg地址都是不同的,所以可以得到不同的值
function init() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { (function(arg){ pAry[i].onclick = function() { alert(arg); }; })(i); }}
4、原理同上,只是将函数参数中的变量放进了函数中进行赋值
function init() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { (function () { var temp = i; pAry[i].onclick = function() { alert(temp); } })(); }}
5、同上,只是通过立即执行函数给变量赋值,然后返回另一个函数到数组里面
function init(){ var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { pAry[i].onclick = function(arg) { return function() {//返回一个函数 alert(arg); } }(i); }}
6、每次产生一个新的实例放进数组
<script> function init() { var pAry = document.getElementsByTagName("p"); for( var i=0; i<pAry.length; i++ ) { pAry[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例 }}