jquery menambah berbilang input

PHPz

Lepaskan： 2023-05-14 11:03:08

asal

985 orang telah melayarinya

Dalam pembangunan bahagian hadapan, jQuery boleh digunakan untuk melaksanakan fungsi menambah kotak input secara dinamik dengan mudah. Ciri ini sangat berguna apabila pengguna perlu memasukkan berbilang kandungan Ia boleh menjadikan aplikasi kami lebih fleksibel, dapat memenuhi keperluan pengguna dan meningkatkan pengalaman pengguna. Di bawah saya akan memperkenalkan cara menggunakan jQuery untuk menambah berbilang kotak input.

Idea asas

Matlamat kami adalah untuk menambahkan berbilang kotak input secara dinamik, jadi kami perlu menentukan idea asas terlebih dahulu. Kami akan menambah butang pada halaman dan apabila pengguna mengklik butang tersebut, kotak input baharu akan dijana secara dinamik. Di samping itu, kita juga perlu menentukan beberapa sifat dan gaya kotak input.

Langkah 1: Bahagian HTML

Mula-mula, tambahkan butang dan bekas untuk kotak input baharu dalam kod HTML. Bekas boleh menjadi teg

atau elemen jenis "teks" dengan teg

Seperti yang anda lihat, kami telah menentukan ID untuk butang dan bekas, yang akan digunakan dalam kod JavaScript berikutnya.

Langkah 2: Bahagian CSS

Memandangkan kita perlu menambah kotak input secara dinamik, kita perlu menentukan beberapa gaya dan atribut untuk kotak input baharu supaya ia boleh kelihatan seperti kotak input lain Sama.

input-bekas input {

margin-bawah: 10px;
paparan: blok;
}

Di sini kami mentakrifkan gaya untuk input baharu kotak ditetapkan dengan jidar bawah dan sifat paparan peringkat blok.

Langkah 3: Bahagian kod jQuery

Kini, kita boleh menulis kod jQuery untuk menambah kotak input baharu secara dinamik.

$(dokumen).ready(function() {
$("#add-input").klik(function() {

$("#input-container").append('<input type="text" name="input[]" />');

Salin selepas log masuk

});
} );

Pertama, kami menggunakan acara document.ready untuk memastikan kod berjalan selepas halaman dimuatkan. Kemudian, kami mentakrifkan acara klik untuk butang, yang akan menambah kotak input baharu pada bekas apabila butang diklik. Di sini kami menggunakan kaedah append() jQuery untuk menambah kotak input baharu pada bekas menggunakan sintaks HTML.

Selain itu, kami juga menetapkan nama untuk kotak input baharu sebagai "input[]", yang akan memudahkan pemprosesan kami dalam kod PHP latar belakang.

Akhir sekali, kami menambah beberapa kod lagi untuk mengalih keluar kotak input yang baru ditambah:

$(document).on('click', '.remove-input', function( ) {
$(this).parent().remove();
});

Kod ini akan menentukan peristiwa klik untuk setiap kotak input yang kami tambahkan Apabila pengguna mengklik Apabila anda mengklik padam butang, ia akan mengeluarkan kotak input.

Ringkasan

Dalam artikel ini, kami menggunakan jQuery untuk melengkapkan fungsi menambah berbilang kotak input secara dinamik. jQuery ialah alat yang sangat berkuasa yang membolehkan kami mencapai pelbagai interaksi dengan lebih mudah dan meningkatkan pengalaman pengguna. Dengan mengubah suai kod dalam artikel ini, anda boleh menjadikannya lebih sesuai untuk aplikasi anda sendiri.

Atas ialah kandungan terperinci jquery menambah berbilang input. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!