Mengapa jQuery Hanya Memilih Elemen Pertama dengan ID Pendua?

HTML Tidak Sah: Berbilang Elemen dengan ID Yang Sama

Penerangan Masalah:

Dalam memandangkan struktur HTML, terdapat tiga butang dengan ID yang sama, "xyz." Walau bagaimanapun, apabila menggunakan pemilih ID jQuery $("#xyz") untuk mengendalikan acara onClick, hanya butang pertama yang bertindak balas. Butang lain diabaikan.

Analisis:

Pemilih ID jQuery direka bentuk untuk memilih elemen pertama dengan ID yang sepadan dalam dokumen. Walau bagaimanapun, mengikut spesifikasi W3C, nilai ID hendaklah unik dalam dokumen. Mempunyai berbilang elemen dengan ID yang sama dianggap HTML tidak sah.

Seperti yang dinyatakan dalam dokumentasi API jQuery, jika lebih daripada satu elemen mempunyai ID yang sama, pemilih jQuery hanya akan memilih elemen padanan pertama. Bergantung pada tingkah laku ini tidak disyorkan dan HTML harus diperbetulkan untuk memastikan keunikan ID.

Penyelesaian:

Untuk menyelesaikan isu ini, gantikan atribut id dengan atribut kelas untuk butang. Ini akan membolehkan butang mempunyai nilai yang berbeza tanpa melanggar peraturan pengesahan HTML.

HTML yang disemak:

<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>

Skrip jQuery yang dikemas kini:

Untuk mengendalikan acara klik untuk semua butang dengan kelas xyz, gunakan jQuery berikut kod:

$(".xyz").click(function(){
    // Get the value of the button that was clicked
    var xyz = this.value;

    // Display the value in an alert box
    alert(xyz);
});

Kod yang dikemas kini ini akan mengendalikan acara onClick dengan betul untuk ketiga-tiga butang dan memaparkan nilai masing-masing dalam kotak amaran.

Atas ialah kandungan terperinci Mengapa jQuery Hanya Memilih Elemen Pertama dengan ID Pendua?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!