Mengapakah Pemilih ID jQuery Hanya Berfungsi dengan Elemen Pertama Apabila Berbilang Elemen Berkongsi ID yang Sama?

Gelagat Pemilih ID jQuery dengan Berbilang ID Serupa

Apabila bekerja dengan jQuery, anda mungkin menghadapi masalah di mana pemilih ID ($(" #xyz")) nampaknya hanya mengambil nilai daripada elemen padanan pertama. Tingkah laku ini boleh mengelirukan dan mengecewakan, terutamanya apabila anda menjangkakan ia berfungsi untuk semua elemen dengan ID yang sama.

Kod HTML dengan ID Yang Sama

Pertimbangkan perkara berikut Kod HTML, yang salah memberikan ID yang sama ("xyz") kepada tiga butang:

<button>

Kod jQuery

Anda boleh mencuba kod jQuery berikut untuk mendapatkan semula nilai butang yang diklik:

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

Mengapa Ia Berfungsi Hanya untuk Butang Pertama

Dalam kes ini, Kod jQuery hanya akan berfungsi untuk butang pertama. Pemilih ID jQuery direka bentuk untuk memilih elemen pertama yang sepadan dengan ID yang ditentukan. Memandangkan ID "xyz" diulang beberapa kali, ia hanya mengembalikan yang pertama.

Ketidaksahihan HTML dan Penyelesaian

Tingkah laku ini menyerlahkan kepentingan memastikan HTML yang sah kod. Menurut spesifikasi HTML, setiap nilai ID mestilah unik dalam dokumen. Mempunyai berbilang elemen dengan ID yang sama adalah tidak sah dan harus dielakkan.

Untuk membetulkan isu, gantikan 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>

JQuery yang dikemas kini Kod

Untuk mendapatkan semula nilai butang yang diklik menggunakan kod HTML yang dikemas kini, gunakan kelas pemilih:

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

Nota: Dalam kod yang disemak ini, adalah tidak perlu untuk membungkus kata kunci "ini" dengan $(), kerana ia sudah menjadi objek JavaScript asli.

Atas ialah kandungan terperinci Mengapakah Pemilih ID jQuery Hanya Berfungsi dengan Elemen Pertama Apabila Berbilang Elemen Berkongsi ID yang Sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!