JavaScript ループでクリック ハンドラーを割り当てるときにクロージャの問題を回避するにはどうすればよいですか?

ループ内のクリック ハンドラー割り当てにおけるクロージャの問題への対処

ループ内の複数の要素にクリック ハンドラーを割り当てる場合、JavaScript のクロージャが原因で一般的な落とし穴が発生します。提供されているコードでは、この問題が発生しています。

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click( function(){
      alert('you clicked ' + i);
    });
  }
});

このコードは、クリックが発生したときに、クリックされた要素のインデックスを表示することを目的としています。ただし、実際のインデックスが表示されるのではなく、クリックごとに「20 回クリックしました」と誤って表示されます。この動作は、ループ内で作成されたクロージャに起因します。

解決策: コールバック関数の使用

この問題を解決するには、以下に示すようにコールバック関数を利用できます。

function createCallback( i ){
  return function(){
    alert('you clicked' + i);
  }
}

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click( createCallback( i ) );
  }
});

この更新バージョンでは、ループ内にコールバック関数が作成されます。この関数は「i」の現在値を取得し、要素がクリックされたときに正しいインデックスが表示されるようにします。

ES6 の let キーワードを利用する

ES6 構文が利用可能な場合は、同じ結果をより簡潔に達成するための let キーワード:

for(let i = 0; i < 20; i++) {
  $('#question' + i).click( function(){
    alert('you clicked ' + i);
  });
}

let キーワードは、「i」がループ内でローカルにスコープ設定され、クロージャーの問題を回避し、各要素のアクティブ化時に正しいクリックされたインデックスを表示します。

以上がJavaScript ループでクリック ハンドラーを割り当てるときにクロージャの問題を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。