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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JS関数の継承について学ぶ記事
  • js の関数の長さはどれくらいですか?
  • JavaScript 基礎シリーズ: 関数とメソッド
  • JavaScriptのスリープ関数の使用
  • PHP の組み込み関数 json_encode と json_decode の例外処理
  • JavaScript 関数をよりエレガントにする方法
  • JavaScript の 50 以上のユーティリティ関数の概要
  • JavaScriptコールバック関数の詳細な理解
  • JavaScript 関数型プログラミングの基礎

<<:  Centos 7.4 でリモート アクセス制御を実装する方法

>>:  クエリでのMySQLのユニークキーの使用と関連する問題

推薦する

Centos Docker ブリッジ モードでホスト Redis サービスにアクセスできないというトラブルシューティングの経験

背景:以前、コンテナ内のホストが提供する Redis サービスにアクセスする必要があるプロジェクトを...

MySQL データのバックアップと復元のサンプル コード

1. データのバックアップ1. mysqldumpコマンドを使用してバックアップするmysqldum...

JavaScript 事前分析、オブジェクトの詳細

目次1. 事前分析1. 変数の事前解析と関数の事前解析1. 変数の事前解析2. 機能事前分析2. 事...

異なる列を持つテーブルのクエリ結果のSQLマージ操作

2 つの異なるテーブルをクエリするには、結果をマージする必要があります。たとえば、table1 の列...

MySQL トランザクション分離はどのように実現されますか?

目次同時シナリオ書き込む読む読む読み取り-書き込みと書き込み-読み取りMySQL のロック行レベルロ...

ウェブページを開いて数秒後に他のページにリダイレクトする

これを実現するには、次のコードを追加するだけです。方法1: メタを使用する使用方法: <Met...

nginxを使用してドメイン名ベースの仮想ホストを構成する

1. 仮想ホストとは何ですか?仮想ホストは、特殊なテクノロジーを使用して、実行中のサーバーを論理的に...

弾幕効果を実現するためのjQuery

この記事では、弾幕効果を実現するためのjQueryの具体的なコードを参考までに共有します。具体的な内...

CentOS7でルートパスワードをリセットする方法

レンガを移動するプロセスでは、さまざまな環境および構成の問題があり、毎回異なるエラーが発生します。 ...

JS 正規マッチングの落とし穴の記録

最近、JS の正規表現マッチングの落とし穴を発見したのですが、その時はあまりにも奇妙だったので、何か...

Docker 起動時の ES メモリ オーバーフローの解決方法

jvm.options ファイルを elasticsearch 構成に追加し、スタック サイズを変更...

CentOS のファイルと権限の基本操作チュートリアル

序文始める前に、ファイル属性とファイル属性を変更する方法について簡単に理解しておく必要があります。 ...

docker を使って sonarqube を構築する方法

目次1. Dockerをインストールする2. ソナーイメージをインストールする3. ソナーを使ってコ...

CSS 要素で計算されたスタイルを取得します (カスケード/最終スタイル後)

CSS 要素内の計算されたスタイル (つまり、カスケード後の最終的なスタイル) を取得するには、W3...

iframeリフレッシュ方式の方が便利

iframeを更新する方法1. 更新するには、JavaScriptのdocument.fr.loca...