循环的理解~2

<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);

}




你可能感兴趣的:(循环的理解~2)