序文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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Centos 7.4 でリモート アクセス制御を実装する方法
>>: クエリでのMySQLのユニークキーの使用と関連する問題
背景:以前、コンテナ内のホストが提供する Redis サービスにアクセスする必要があるプロジェクトを...
1. データのバックアップ1. mysqldumpコマンドを使用してバックアップするmysqldum...
目次1. 事前分析1. 変数の事前解析と関数の事前解析1. 変数の事前解析2. 機能事前分析2. 事...
2 つの異なるテーブルをクエリするには、結果をマージする必要があります。たとえば、table1 の列...
目次同時シナリオ書き込む読む読む読み取り-書き込みと書き込み-読み取りMySQL のロック行レベルロ...
これを実現するには、次のコードを追加するだけです。方法1: メタを使用する使用方法: <Met...
1. 仮想ホストとは何ですか?仮想ホストは、特殊なテクノロジーを使用して、実行中のサーバーを論理的に...
この記事では、弾幕効果を実現するためのjQueryの具体的なコードを参考までに共有します。具体的な内...
レンガを移動するプロセスでは、さまざまな環境および構成の問題があり、毎回異なるエラーが発生します。 ...
最近、JS の正規表現マッチングの落とし穴を発見したのですが、その時はあまりにも奇妙だったので、何か...
jvm.options ファイルを elasticsearch 構成に追加し、スタック サイズを変更...
序文始める前に、ファイル属性とファイル属性を変更する方法について簡単に理解しておく必要があります。 ...
目次1. Dockerをインストールする2. ソナーイメージをインストールする3. ソナーを使ってコ...
CSS 要素内の計算されたスタイル (つまり、カスケード後の最終的なスタイル) を取得するには、W3...
iframeを更新する方法1. 更新するには、JavaScriptのdocument.fr.loca...