Mengapa Pemilih ID jQuery Saya Hanya Berfungsi pada Elemen Pertama?

Pemilih ID jQuery Hanya Memilih Elemen Pertama: Memahami Isu

Walaupun mempunyai tiga butang dengan ID yang sama, pemilih #id jQuery hanya bertindak balas pada klik butang pertama. Tingkah laku ini berpunca daripada peraturan HTML asas yang menyatakan bahawa setiap elemen mesti mempunyai ID unik dalam dokumen.

Struktur HTML Tidak Sah

Kod HTML yang diberikan melanggar peraturan ini dengan memberikan ID yang sama (" xyz") kepada berbilang butang. Menurut spesifikasi HTML, "Atribut ini memberikan nama kepada elemen. Nama ini mestilah unik dalam dokumen."

Penyelesaian: Tukar kepada Kelas

Untuk menangani isu ini, gantikan Atribut ID dengan atribut kelas untuk setiap butang:

<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>

Kod jQuery yang disemak

Dengan struktur HTML yang dikemas kini, kod jQuery hendaklah diubah suai seperti berikut:

$(".xyz").click(function(){
    alert(this.value);
    // No need for jQuery $(this).val() to get the value of the input.
});

Memahami Gelagat jQuery

pemilih #id jQuery hanya memilih elemen pertama dengan ID yang ditentukan dalam DOM. Ini kerana fungsi document.getElementById yang mendasari dalam penyemak imbas melaksanakan tingkah laku ini.

Kesimpulan

Dengan mengikut garis panduan ini, anda boleh mengendalikan berbilang elemen dengan tujuan fungsi yang sama dalam jQuery dengan berkesan, memastikan bahawa semua butang bertindak balas kepada klik seperti yang dijangkakan.

Atas ialah kandungan terperinci Mengapa Pemilih ID jQuery Saya Hanya Berfungsi pada Elemen Pertama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!