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のユニークキーの使用と関連する問題

推薦する

Unicode の数学記号の概要

数学、物理学、および一部の科学技術分野で使用される特殊記号は多数あります。Unicode コードには...

ウェブページ内の 2 つのボックス モデル (W3C ボックス モデル、IE ボックス モデル)

Web ページ ボックス モデルには 2 種類あります。 1: 標準 W3C ボックス モデル。2:...

JPQLに基づく純粋なSQL文方式の詳細な説明

JPQL は Java Persistence Query Language の略です。 Java ...

Windows Server 2019 IIS10.0+PHP(FastCGI)+MySQL 環境構築チュートリアル

準備1. 環境の説明:オペレーティング システム: Windows Server 2019 PHP ...

Vue ソング プログレス バーのサンプル コード

なお、これはvue-cliで作成したプロジェクトではありません。vue.jsを参照して記述したHTM...

Linux システム構成 (サービス制御) の詳細な紹介

目次序文1. システムサービス制御1. システムctl 2. ターゲット3. 共通システムサービス4...

Vue3 のリアクティブ関数 toRef 関数 ref 関数の紹介

目次リアクティブ機能使用法: toRef 関数 (理解するだけ)使用法: ref関数レスポンシブデー...

myisamchk および mysqlcheck ツールを使用して破損した MySQL データベース ファイルを迅速に修復する方法

サーバーのデータベース ハード ディスク領域がいっぱいだったため、大量のデータの書き込みに失敗し、「...

Docker で php-nginx-alpine イメージをゼロから構築する方法

これまでにも Docker 環境でいくつかのプロジェクトを実行したことはありますが、まだイメージをよ...

Linux サーバー上で nvidia-docker 環境を設定するプロセスの詳細な説明

Docker はコンテナに相当し、必要な動作環境に応じて対応する動作環境を構築できます。このとき、各...

Webデザインチュートリアル(5):Webビジュアルデザイン

<br />前回の記事:Webデザイン講座(4):素材と表現について Webデザイン上級...

MySQL トリガーの使用シナリオとメソッドの例

トリガー:トリガーの使用シナリオと対応するバージョン:トリガーは次の MySQL バージョンで使用で...

Vueは移動可能なフローティングボタンを実装します

この記事の例では、どこにでも移動できるフローティングボタンを実現するためのVueの具体的なコードを共...

JavaScript の継承についてどれくらい知っていますか?

目次序文コンストラクタ、プロトタイプオブジェクト、インスタンスオブジェクトの関係プロトタイプチェーン...

MySQL では SQL ステートメントはどのように実行されますか?

目次1. MySQLアーキテクチャの分析1.1 コネクタ1.2 クエリキャッシュ1.3 アナライザー...