JavaScriptのforループを使用して一括登録したイベントが正しくインデックス値を取得できない問題の解決方法_javascriptスキル

この記事の例では、JavaScript が for ループを使用してバッチに登録されたイベントのインデックス値を正しく取得できない問題の解決方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

多くの友人は問題に遭遇するかもしれません。つまり、for ループを使用してイベント処理関数をバッチで登録し、最後にイベント処理関数を通じて現在の要素のインデックス値を取得するときに失敗します。まずはコード例:

コードをコピーします コードは次のとおりです:

<頭>




<スクリプトタイプ="text/javascript">
window.onload=function(){
var oLis=document.getElementsByTagName("li");
var oshow=document.getElementById("show");
for(varindex=0;index oLis[インデックス].onclick=function(){
oshow.innerHTML=index;
}
}
}

• 一生懸命働くことによってのみ、より良い明日を手に入れることができます。


• 分かち合いと相互支援は進歩の最大の源です。


• 毎日が新しいので大切にしましょう。


• 誰も最初からマスターではありません。努力を通じてのみ成長することができます


• 今だけが価値があって、次の1秒は幻だ

上記のコードでは、li 要素をクリックすると、ポップアップ値は常に 4 になります。li 要素をクリックすると、div 内の現在の li 要素のインデックス値が表示されるということです。理由。理由は非常に簡単で、forループ実行後にindexの値が4になったため、上記の現象が発生します。
コードは次のように変更されます:

コードをコピーします コードは次のとおりです:

<頭>




<スクリプトタイプ="text/javascript">
window.onload=function(){
var oLis=document.getElementsByTagName("li");
var oshow=document.getElementById("show");
for(varindex=0;index oLis[インデックス]._index=index;
oLis[インデックス].onclick=function(){
oshow.innerHTML=this._index;
}
}
}

• 一生懸命働くことによってのみ、より良い明日を手に入れることができます。


• 分かち合いと相互支援は進歩の最大の源です。


• 毎日が新しいので大切にしましょう。


• 誰も最初からマスターではありません、努力を通じてのみ成長することができます


• 今だけが価値があって、次の1秒は幻だ

上記のコードは要件を満たしています。もちろん、次のコードも使用できます。

コードをコピーします コードは次のとおりです:

<頭>




<スクリプトタイプ="text/javascript">
window.onload=function(){
var oLis=document.getElementsByTagName("li");
var oshow=document.getElementById("show");
for(varindex=0;index (関数(インデックス){
oLis[インデックス].onclick=function(){
oshow.innerHTML=index;
}
})(インデックス)
}
}

• 一生懸命働くことによってのみ、より良い明日を手に入れることができます。


• 分かち合いと相互支援は進歩の最大の源です。


• 毎日が新しいので大切にしましょう。


• 誰も最初からマスターではありません、努力を通じてのみ成長することができます


• 今だけが価値があって、次の1秒は幻だ

この記事が皆さんの JavaScript ベースの Web プログラミングに役立つことを願っています。