<ul>
<li>产品1</li>
<li>产品2</li>
<li>产品3</li>
</ul>
----------------华丽丽的js分隔线
目标是点击li就跳出提示框提示当前点击的是第几个产品,很自然的思路是
For(var i=0;i<liArr.length;i++){
liArr[i].onclick=function(){
Alert(liArr[i].innerHTML)
}
但是
事件和函数只是绑定关系
循环已经结束,可是函数并没有触发
函数触发时,循环已结束
会报错,因为i=4;
那么,如何留住i的值呢
1.
var liArr=getElementsByTagName="li";
for(var i=0;i<liArr.length;i++){
liArr[i].index=i;//在这里标记下i的值
liArr[i].onclick=function(){
alert(this.index);
}
}
2. var liArr=getElementsByTagName="li";
for(var i=0;i<liArr.length;i++){
liArr[i].onclick=function(){
this.index=true;//用来标记i值
for(var j=0;j<liArr.length;j++){
if(liArr[j].index){用bool值,这样写就可以了
delete this.index;//删除原来赋予的true
alert(j);
break;
} }
}
3.通过闭包和匿名函数运行来实现
Var liArr=getElementsByTagName=”li”;
for(var i=0;i<liArr.length;i++){
liArr[i].onclick=(function(k){
return function(){
alert(k)
}
})(i);
}