jQuery を使用してブートストラップ モーダルにデータを渡すにはどうすればよいですか?

ブートストラップ モーダルへのデータの受け渡し

インタラクティブな Web ページを作成する場合、コンポーネント間でデータを受け渡すと、ユーザー エクスペリエンスが向上し、機能が合理化されます。ブートストラップ モーダルのコンテキストでは、トリガーとなるハイパーリンクとモーダル自体の間でデータを転送すると、ユーザーに追加情報やコンテキストを提供できます。

データをブートストラップ モーダルに動的に渡す 1 つのアプローチは、jQuery の .on イベントを利用することです。ハンドラ。このメソッドは、「open-AddBookDialog」などの特定のクラスを持つ要素の潜在的なクリックを柔軟にキャプチャできます。

$(document).on("click", ".open-AddBookDialog", function() {

クラス「open-AddBookDialog」の要素がクリックされると、イベント ハンドラーが実行されます。 。この関数内では、クリックされた要素に関連付けられたデータは .data() メソッドを使用して取得できます。

var myBookId = $(this).data('id');

このスニペットは、クリックされたハイパーリンクに付加された一意の ID を取得し、変数 myBookId に格納します。

次に、jQuery のセレクターを使用して、ID「bookId」を持つモーダル本体の入力要素をターゲットにできます。この入力フィールドには、渡された ID が挿入されます。

$(".modal-body #bookId")

この入力要素の値を myBookId に設定すると、ID がハイパーリンクからモーダルに効率的に転送されます。

$(".modal-body #bookId").val( myBookId );

モーダル内の入力フィールドに動的に値を入力することで、貴重な情報がハイパーリンクから渡され、データベース検索やカスタマイズされたコンテンツなどのカスタム モーダル機能が可能になります。 display.

最後に、モーダルを表示するために modal('show') 関数を手動で呼び出す必要がないことに注意してください。データ転送が完了すると、ブートストラップは自動的にモーダルを表示します。

以上がjQuery を使用してブートストラップ モーダルにデータを渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。