JSの中でfor循環の出現の問題:どのようにli元素にイベントを結び付けて、それぞれのli元素をクリックして対応する索引を弾きますか?

4673 ワード

javascript webフロントエンド開発

最初に一つの問題に遭遇したのは、HTMLに「li」という四つのタグを書きました.それぞれのliに一つのクリックイベントを結びつけたいです.それぞれのliをクリックすることによって、それに対応するインデックスを弾いて、最初はこのようにします.

<html>
<head>
<title>     title>
<script type="text/javascript">
window.οnlοad=function(){
var li=document.getElementsByTagName("li");
for(var i=0;ifunction(){
            alert(i);
            }   
}
}
script>
head>
<body>
<ul>
 <li>li1li>
 <li>li2li>
 <li>li3li>
 <li>li4li>
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].οnclick=function(){alert(num);}

    })(i)

私たちは匿名関数を使用しています.この方法はどのように実行されていますか?jsの匿名関数を参照してください.http://blog.csdn.net/clh386/article/details/78560136即座にそれを実行すると、値によって伝達されるので、パラメータiがパラメータnumに伝達されます.そうすると、forサイクルを実行するたびに、li[i]を与えます.numコピーを作成します.つまり、メモリの中にnumの値を入れる空間を開きます.このように各liには対応するnum値があります.
この問題には他の解決方法があります.
方法1

var li=document.getElementsByTagName("li");

   for(var i=0;i//   li         ， 

　　　  li[i].onclick = function(){

　　　　　　alert("      ："+this.index);    //        0  

　　　　}

   }

方法2

var li=document.getElementsByTagName("li");
   for(var i = 0; ifunction(n){
    　　　　return function(){
                alert("      ："+n);    //        0  
            }
    　　}(i)
    }

JavaScript function関数の種類の詳細