Mengapa Pemilih ID jQuery Tidak Berfungsi dengan Berbilang Elemen Mempunyai ID yang Sama?

Pemilih ID jQuery Tidak Berfungsi untuk Berbilang Elemen

Walaupun menggunakan ID yang sama untuk berbilang elemen, pemilih ID jQuery hanya mengenali elemen pertama dengan ID itu. Ini menimbulkan cabaran apabila cuba mendapatkan semula nilai berbilang elemen ID yang sama apabila peristiwa klik. Berikut ialah isu yang dihadapi:

<button>

$("#xyz").click(function() {
  var xyz = $(this).val();
  alert(xyz);
});

Walau bagaimanapun, skrip jQuery ini hanya menangkap nilai butang pertama ("XYZ1"). Mengklik butang lain tidak mencetuskan tindak balas.

Sebab tingkah laku ini terletak pada sifat atribut ID HTML. Menurut spesifikasi HTML, nilai ID mestilah unik dalam dokumen. Menugaskan ID yang sama kepada berbilang elemen melanggar peraturan ini, menyebabkan penyemak imbas hanya mengembalikan elemen pertama yang dipadankan apabila membuat pertanyaan menggunakan ID.

Penyelesaian: Pengecam Unik dengan Kelas

Kepada selesaikan isu ini, gantikan atribut ID dengan atribut kelas:

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

Sekarang, gunakan pemilih kelas dalam jQuery:

$(".xyz").click(function() {
  alert(this.value);
});

Kod ini akan berjaya mendapatkan semula nilai ketiga-tiga butang selepas mengklik. Daripada bergantung pada pemilih ID yang tidak boleh dipercayai, atribut kelas menyediakan pengecam unik untuk berbilang elemen yang serupa dan membolehkan mendapatkan semula maklumat tertentu.

Atas ialah kandungan terperinci Mengapa Pemilih ID jQuery Tidak Berfungsi dengan Berbilang Elemen Mempunyai ID yang Sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!