JavaScript一个经典问题

看下面代码

<ul id="demo"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

<script> var ul=document.getElementById('demo'); var oLi=ul.getElementsByTagName('li'); for (var i = 0; i < oLi.length; i++) { oLi[i].onclick=function(){ alert(i); } } </script>

那么当我们点击第一个li就会弹出0,点击第二个就会弹出1……真的是这样吗?当我们去实践的时候就会发现,每次弹出的,都是5!!!

为什么会这样呢?

因为当代码执行到这里的时候,i已经变成5了,也就是说,我们还没来得及点击,i已经变成5了,这时候再点击弹出的当然只能是5。你说为什么是5,而不是4,i明明只会增长到4啊!这个我也不知道为什么,如果你知道麻烦告诉我。

那么解决办法是什么呢?

<script> var ul=document.getElementById('demo'); var oLi=ul.getElementsByTagName('li'); for (var i = 0; i < oLi.length; i++) { (function(n){ oLi[n].onclick=function(){ alert(n); } })(i); } </script>

这里我们在for循环内部定义了一个立即执行函数,这样就可以顺利弹出每个li的索引了。

原创文章,转载请注明出处!

上一篇:10.16-17 mailq&mail:显示邮件传输队列&发送邮件


下一篇:js区分字符串和数字,有时候需要将字符串转换成数字