2

私は現在Javascriptを学んでいますが、今はイベントリスナーをいじっています。

しかし、問題があります。イベントリスナーをループにすると、それを保持する変数を渡す方法がわかりません。要素をクリックすると、指定した位置に移動するスクリプトを作成しました。しかし、今ではすべての要素が同じ位置に配置されているため、何らかの理由ですべての要素が同じ番号になっています。

私がこれとしてそれを渡すかどうかに関係なく：

var index = i;    

applications[i].addEventListener('click', function(){ 

 
var posLeft2 = 10*index+"%";

 var iconstyleO =  " text-align: center; "+
" font: bold 22px Tahoma; "+
" position:fixed; "+
" top: 67%; "+
" left: "+posLeft2+"; "+
" display:block; "+
" margin: 150px auto; "+
" color: #ffffff; "+
" z-index: 3; "+
" -webkit-border-radius: 10px; "+
" background: rgb(140,140,140); "+
" width: 10%; "+
" height: 10%; ";

this.setAttribute('style',iconstyleO); 
     }  ,false);

またはこのように：

var index = i;    

applications[i].addEventListener('click', function(index){ 

 
var posLeft2 = 10*index+"%";

 var iconstyleO =  " text-align: center; "+
" font: bold 22px Tahoma; "+
" position:fixed; "+
" top: 67%; "+
" left: "+posLeft2+"; "+
" display:block; "+
" margin: 150px auto; "+
" color: #ffffff; "+
" z-index: 3; "+
" -webkit-border-radius: 10px; "+
" background: rgb(140,140,140); "+
" width: 10%; "+
" height: 10%; ";

this.setAttribute('style',iconstyleO); 
     }  ,false);

彼らはまだイベントリスナーを同じ位置に設定しています。渡し方に応じて、最後の要素の位置または最初の要素の位置のいずれかになります。

何か案は？

4

1 に答える 1

4

Javascriptにはブロックスコープがありません。
したがって、すべてのコールバックは同じ変数を共有しています。

これを修正するには、コードをIIFEでラップして、各コールバックが独自のクロージャーを取得するようにする必要があります。

(function(index) {
    applications[i].addEventListener('click', function(){ 
        ...
    });
})(i);
于 2012-12-31T17:48:38.577 に答える