Kadangkala pembangun perlu mengetahui ID butang yang telah diklik oleh pengguna untuk memutuskan tindakan selanjutnya pada halaman web. Seperti yang anda akan lihat dalam penulisan ini, ini boleh dilakukan melalui JavaScript vanila dan jQuery. Jadi, mari kita mulakan:
Pertama, kami akan membuat halaman web HTML ringkas yang mempunyai dua butang di tengah halaman:
DOCTYPE html >
< html >
< badan >
< pusat >
< div gaya = 'margin-top: 50px;' >
< h2 > Klik salah satu daripada butang berikut h2 >
< butang ID = 'butang_satu' gaya = 'lebar: 100px; tinggi:40px; margin-kanan: 10px;' > 1 butang >
< butang ID = 'butang_dua' gaya = 'lebar: 100px; tinggi: 40px;' > dua butang >
div >
pusat >
badan >
html >
Bagaimana untuk Mendapatkan ID Butang yang Diklik Menggunakan JavaScript?
Kami boleh mendapatkan ID butang yang diklik menggunakan JavaScript dalam beberapa kaedah yang berbeza. Dalam kaedah pertama kami, kami akan mendapatkan senarai node semua teg butang dan menyimpannya di dalam pembolehubah. Kemudian kami akan mengulangi senarai node untuk mendapatkan ID butang yang telah diklik:
< skrip >
butang var = document.getElementsByTagName ( 'butang' ) ;
untuk ( biarkan indeks = 0 ; indeks < butang.panjang; indeks++ ) {
butang [ indeks ] .onclick = fungsi ( ) {
amaran ( ini.id ) ;
}
}
skrip >
Kami juga boleh menyediakan setiap butang dengan onclick acara secara individu:
DOCTYPE html >
< html >
< badan >
< pusat >
< div gaya = 'margin-top: 50px;' >
< h2 > Klik salah satu daripada butang berikut h2 >
< butang ID = 'butang_satu' gaya = 'lebar: 100px; tinggi:40px; margin-kanan: 10px;' onclick = 'alertId(this.id)' > 1 butang >
< butang ID = 'butang_dua' gaya = 'lebar: 100px; tinggi: 40px;' onclick = 'alertId(this.id)' > dua butang >
div >
pusat >
badan >
< skrip >
fungsi alertId ( ID ) {
amaran ( ID )
}
skrip >
html >
Bagaimana untuk Mendapatkan ID Butang yang Diklik Menggunakan jQuery?
jQuery juga mempunyai beberapa kaedah berbeza yang boleh digunakan untuk mendapatkan ID butang yang diklik. Kami akan mulakan dengan klik() kaedah yang digunakan pada pemilih dan mengambil nama fungsi sebagai hujah pilihan:
DOCTYPE html >
< html >
< badan >
< pusat >
< div gaya = 'margin-top: 50px;' >
< h2 > Klik salah satu daripada butang berikut h2 >
< butang ID = 'butang_satu' gaya = 'lebar: 100px; tinggi:40px; margin-kanan: 10px;' onclick = 'alertId(this.id)' > 1 butang >
< butang ID = 'butang_dua' gaya = 'lebar: 100px; tinggi: 40px;' onclick = 'alertId(this.id)' > dua butang >
div >
pusat >
badan >
< skrip >
$ ( 'butang' ) .klik ( alertId ( $ ( ini ) .attr ( 'ID' ) ) ) ;
fungsi alertId ( ID ) {
amaran ( ID )
}
skrip >
html >
Kita juga boleh menggunakan pada() kaedah untuk melampirkan pengendali acara pada elemen. The pada() kaedah mengambil sekurang-kurangnya satu peristiwa sebagai hujah bersama beberapa hujah pilihan lain:
< html >
< badan >
< pusat >
< div gaya = 'margin-top: 50px;' >
< h2 > Klik salah satu daripada butang berikut h2 >
< butang ID = 'butang_satu' gaya = 'lebar: 100px; tinggi:40px; margin-kanan: 10px;' onclick = 'alertId(this.id)' > 1 butang >
< butang ID = 'butang_dua' gaya = 'lebar: 100px; tinggi: 40px;' onclick = 'alertId(this.id)' > dua butang >
div >
pusat >
badan >
< skrip >
$ ( 'butang' ) .pada ( 'klik' , alertId ( $ ( ini ) .attr ( 'ID' ) ) ) ;
fungsi alertId ( ID ) {
amaran ( ID )
}
skrip >
html >
Kesimpulan
ID butang yang diklik boleh diakses melalui JavaScript biasa dan jQuery. Kami membincangkan empat kaedah sedemikian dan memberikan perincian yang mendalam serta contoh yang relevan dalam penulisan ini.