刚开始遇到一个问题就是我在HTML中写了四个< li >标签,想给每个li 绑定一个点击事件,通过点击每个li ,弹出它对应的索引,刚开始是这么做的:
<html>
<head>
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function(){
var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onclick=function(){
alert(i);
}
}
}
</script>
</head>
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
</body>
</html>
运行的时候发现点击任何一个li都弹出的是4,后来找到原因,在点击li元素时,触发点击事件,此时for循环已经结束,其中得 i 已经变为4。因此触发事件中alert(i)函数弹出的永远是4。
解决办法:使用匿名函数。 把上面for循环改为如下代码
for(var i=0;i<li.length;i++){
(function(num){
li[i].onclick=function(){alert(num);}
})(i)
我们使用了一个匿名函数,(function(num){ })(i),这个方法是怎么执行的可以参考[js中的匿名函数](http://blog.youkuaiyun.com/clh386/article/details/78560136并立即执行它,由于是按值传递,参数i会传递给参数 num,这样的话,每执行一次for循环,就会给li [i]创建一个num副本,也就是在内存中开辟一个空间存入num的值,这样每个li都会有对应的num值。
这个问题还有其他解决方法:
方法一
var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].index = i; //给每个li定义一个属性索引值,赋
li[i].onclick = function(){
alert("下标索引值为:"+this.index); // 索引值从0开始
}
}
方法二
var li=document.getElementsByTagName("li");
for(var i = 0; i<li.length; i++){
li[i].onclick = function(n){
return function(){
alert("下标索引值为:"+n); // 索引值从0开始
}
}(i)
}