<body onload="init();"> <p>产品 0</p> <p>产品 1</p> <p>产品 2</p> <p>产品 3</p> <p>产品 4</p> </body>
初学者常常会
function init() { var pAry = document.getElementsByTagName("p"); for(var i=0;i<pAry.length;i++) { pAry[i].onclick = function() { alert(i); } } }
这样只会弹出5，而不是0，1，2，3，4。
下面是解决的几种方法
//将变量 i 保存给在每个段落对象(p)上 function init1() { var pAry = document.getElementsByTagName("p"); for(var i=0; i<pAry.length; i++) { pAry[i].i = i; pAry[i].onclick = function() { alert(this.i); } } }
//加一层闭包，i 以函数参数形式传递给内层函数 function init12() { var pAry = document.getElementsByTagName("p"); for(var i=0; i<pAry.length; i++) { (function(arg) { pAry[i].onclick = function() { alert(arg); } ; } )(i); //调用时参数 } }
//加一层闭包，i 以局部变量形式传递给内层函数 function init3() { var pAry = document.getElementsByTagName("p"); for(var i=0; i<pAry.length; i++) { (function () { var temp = i; //调用时局部变量 pAry[i].onclick = function() { alert(temp); } } )(); } }