Mengapa Pemilih ID jQuery Saya Hanya Mempengaruhi Elemen Pertama?

Pemilih ID jQuery Hanya Menyasarkan Elemen Pertama

Gambaran Keseluruhan

Artikel ini menangani isu di mana pemilih ID jQuery (#xyz) gagal disasarkan berbilang elemen dengan nilai ID yang sama. Sebaliknya, ia hanya beroperasi pada elemen padanan pertama, menyebabkan elemen berikutnya tidak bertindak balas. Tingkah laku ini dikaitkan dengan penggunaan atribut id HTML yang salah dan batasan yang wujud bagi pemilih ID jQuery.

Pengesahan HTML

Mengikut spesifikasi HTML, setiap elemen dalam dokumen mesti mempunyai unik nilai atribut id. Menggunakan ID yang sama untuk berbilang elemen menjadikan HTML tidak sah. Oleh itu, kod HTML berikut, yang termasuk tiga butang dengan ID yang sama ("xyz"), adalah tidak betul:

<button>

Gelagat Pemilih jQuery

Pemilih ID jQuery (#id) ialah direka untuk menyasarkan satu elemen berdasarkan ID uniknya. Apabila berbilang elemen berkongsi ID yang sama, pemilih hanya memilih elemen padanan pertama mengikut spesifikasi HTML. Akibatnya, skrip jQuery berikut, yang cuba mendapatkan semula nilai setiap butang apabila diklik, akan berfungsi hanya untuk butang pertama:

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

Penyelesaian

Untuk membetulkan isu ini dan memastikan setiap kefungsian butang, kod HTML mesti diubah suai untuk menggantikan atribut id dengan atribut kelas. Ini membolehkan berbilang elemen berkongsi kelas yang sama tanpa melanggar piawaian HTML:

<button class="xyz" value="1">XYZ1</button>
<button class="xyz" value="2">XYZ2</button>
<button class="xyz" value="3">XYZ3</button>

Skrip jQuery yang sepadan hendaklah dikemas kini seperti berikut untuk menyasarkan semua elemen dengan kelas "xyz":

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

Kesimpulan

Dengan menggunakan pengubahsuaian ini, anda boleh memastikan bahawa semua butang dengan kelas "xyz" bertindak balas kepada peristiwa klik, menghapuskan isu sebelumnya di mana hanya butang pertama berfungsi. Pendekatan ini mematuhi piawaian pengesahan HTML dan memanfaatkan fleksibiliti pemilih kelas jQuery untuk mencapai gelagat yang diingini.

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