循環的理解~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);

}