JavaScript で外部変数にアクセスするサブ関数の 3 つのソリューション

序文

Web ページを作成するときに、次のような状況に遭遇することはよくあります。

<本文>
  
<div class="btns-wrapper"></div>
  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<スクリプト>
var ラッパー = $('.btns-wrapper');
(var i = 0; i < 5; i++){
 var btn = $('<button>ボタン' + i + '</button>').appendTo(wrapper);
 btn.on('クリック', 関数(evt){
  console.log('ボタンをクリックしてください: ' + i);
 });
}
</スクリプト>
  
</本文>

コードは非常にシンプルで、ページ上にいくつかのボタンを作成し、ボタンのクリックイベントを定義するだけです。

しかし、ボタンをクリックすると、取得されるシリアル番号は常に i の最後の値である 5 であることがわかります。

これは、クリックイベントを定義するために使用される匿名関数が同じ変数 i を参照するためです。

解決策1: すぐに実行する

var ラッパー = $('.btns-wrapper');
(var i = 0; i < 5; i++){
 var btn = $('<button>ボタン' + i + '</button>').appendTo(wrapper);

 //デフォルトメソッド //btn.on('click', function(evt){
 // console.log('ボタンをクリックします: ' + i);
 // //);

 //方法1: すぐに実行 btn.on('click', (function(n){
  関数を返す(evt){
   console.log('ボタンをクリックしてください: ' + n);
  }
 }）（私））;

}

このアプローチは、イベントを定義するときに各ボタンに直接個別の匿名関数（クロージャ）を作成し、各関数が正しいi変数を保持するというものである。

解決策2: jQueryイベントパスを使用する

var ラッパー = $('.btns-wrapper');
(var i = 0; i < 5; i++){
 var btn = $('<button>ボタン' + i + '</button>').appendTo(wrapper);

 //デフォルトメソッド //btn.on('click', function(evt){
 // console.log('ボタンをクリックします: ' + i);
 // //);

 //方法 2: JQuery イベントパラメータを使用する btn.on('click', { i: i }, function(evt){
  console.log('ボタンをクリックします: ' + evt.data.i);
 });

}

この方法ははるかに簡単です。jQuery を使用して、パラメータ本体を匿名関数に渡すだけです。

解決策3: DOMのデータ属性を使用する

var ラッパー = $('.btns-wrapper');
(var i = 0; i < 5; i++){
 var btn = $('<button>ボタン' + i + '</button>').appendTo(wrapper);

 //デフォルトメソッド //btn.on('click', function(evt){
 // console.log('ボタンをクリックします: ' + i);
 // //);

 //方法 3: DOM のデータ属性を使用する btn.data('i', i);
 btn.on('クリック', 関数(evt){
  console.log('ボタンをクリックしてください:' + $(this).data('i'));
 });

}

この方法も非常にシンプルですが、データ属性を使用して構造化データを定義できないという欠点があります。

要約する

全体的に、jQuery 環境であれば、イベントパラメータを使用して変数を渡すのが最も簡単で、構造化されたデータを渡すことができます。

それ以外の場合は、即時実行（クローズ）を通じてのみ実行できます。

JavaScript のサブ関数が外部変数にアクセスする方法についてはこれで終わりです。JavaScript のサブ関数が外部変数にアクセスする方法についての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: