序文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のユニークキーの使用と関連する問題
数学、物理学、および一部の科学技術分野で使用される特殊記号は多数あります。Unicode コードには...
Web ページ ボックス モデルには 2 種類あります。 1: 標準 W3C ボックス モデル。2:...
JPQL は Java Persistence Query Language の略です。 Java ...
準備1. 環境の説明:オペレーティング システム: Windows Server 2019 PHP ...
なお、これはvue-cliで作成したプロジェクトではありません。vue.jsを参照して記述したHTM...
目次序文1. システムサービス制御1. システムctl 2. ターゲット3. 共通システムサービス4...
目次リアクティブ機能使用法: toRef 関数 (理解するだけ)使用法: ref関数レスポンシブデー...
サーバーのデータベース ハード ディスク領域がいっぱいだったため、大量のデータの書き込みに失敗し、「...
これまでにも Docker 環境でいくつかのプロジェクトを実行したことはありますが、まだイメージをよ...
Docker はコンテナに相当し、必要な動作環境に応じて対応する動作環境を構築できます。このとき、各...
<br />前回の記事:Webデザイン講座(4):素材と表現について Webデザイン上級...
トリガー:トリガーの使用シナリオと対応するバージョン:トリガーは次の MySQL バージョンで使用で...
この記事の例では、どこにでも移動できるフローティングボタンを実現するためのVueの具体的なコードを共...
目次序文コンストラクタ、プロトタイプオブジェクト、インスタンスオブジェクトの関係プロトタイプチェーン...
目次1. MySQLアーキテクチャの分析1.1 コネクタ1.2 クエリキャッシュ1.3 アナライザー...