标签:str 显示 依次 设置 不能 click 事件对象 一个 color
对于javascript的循环取值是每个开发者都遇到过的问题,例如,下面这个例子我们并不能得到想要的结果:
<body> <ul> <li>fas</li> <li>sf</li> <li>fas</li> <li>sf</li> <li>sf</li> </ul> <script type="text/javascript"> <!-- window.onload=function(){ var lis=document.getElementsByTagName(‘li‘); var i,len=lis.length; for ( i=0;i<len ;i++ ) { //alert(i); // 依次为0,1,2,3,4 lis[i].onclick=function(){ alert(i); //5 } } </body>
我们是希望点击每一个li标签都显示它自己的索引值,但由于内部函数调用时外部的 i 时,i 已经循环完毕,值为5,所以不能正确输出,更详细的解释在于此时onclick函数时一个闭包函数,每次引用的时外部函数的最后一个变量。
关于解决放法,有很多中,在此介绍下我自己常用的吧:
方法一:将循环中的 i 值设置为事件对象的属性,在上面的例子中,事件对象就是lis[i];
window.onload=function(){ var lis=document.getElementsByTagName(‘li‘); var i,len=lis.length; for ( i=0;i<len ;i++ ) { lis[i].index=i; lis[i].onclick=function(){ alert(this.index); } }
方法二:外层加一个立即调用的匿名函数;
标签:str 显示 依次 设置 不能 click 事件对象 一个 color
原文地址:http://www.cnblogs.com/younylight/p/7744894.html