Apabila membuat halaman web interaktif, menghantar data antara komponen boleh meningkatkan pengalaman pengguna dan memperkemas kefungsian. Dalam konteks modal Bootstrap, memindahkan data antara hiperpautan pencetus dan modal itu sendiri boleh memberikan maklumat atau konteks tambahan kepada pengguna.
Satu pendekatan untuk menghantar data secara dinamik kepada modal Bootstrap ialah dengan menggunakan acara .on jQuery pengendali. Kaedah ini menawarkan fleksibiliti dalam menangkap potensi klik pada elemen dengan kelas tertentu, seperti "open-AddBookDialog."
$(document).on("click", ".open-AddBookDialog", function() {
Apabila mana-mana elemen dengan kelas "open-AddBookDialog" diklik, pengendali acara melaksanakan . Dalam fungsi ini, data yang dikaitkan dengan elemen yang diklik boleh diperoleh menggunakan kaedah .data().
var myBookId = $(this).data('id');
Coretan ini mendapatkan ID unik yang dilampirkan pada hiperpautan yang diklik dan menyimpannya dalam pembolehubah myBookId.
Seterusnya, elemen input badan modal dengan ID "bookId" boleh disasarkan menggunakan jQuery's pemilih. Medan input ini ialah tempat ID yang diluluskan akan dimasukkan.
$(".modal-body #bookId")
Menetapkan nilai elemen input ini kepada myBookId dengan cekap memindahkan ID daripada hiperpautan ke modal.
$(".modal-body #bookId").val( myBookId );
Dengan mengisi medan input secara dinamik dalam modal, maklumat berharga dihantar daripada hiperpautan, membenarkan kefungsian mod tersuai, seperti carian pangkalan data atau kandungan yang disesuaikan paparan.
Akhir sekali, perlu diingat bahawa memanggil fungsi modal('show') secara manual untuk memaparkan modal adalah tidak diperlukan. Bootstrap secara automatik memaparkan modal selepas pemindahan data selesai.
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghantar Data ke Modal Bootstrap Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!