Pourquoi le sélecteur d'ID de jQuery ne fonctionne-t-il pas avec plusieurs éléments ayant le même ID ?

Le sélecteur d'ID jQuery ne fonctionne pas pour plusieurs éléments

Malgré l'utilisation du même ID pour plusieurs éléments, le sélecteur d'ID de jQuery ne reconnaît que le premier élément avec cette pièce d'identité. Cela pose un défi lorsque l'on tente de récupérer les valeurs de plusieurs éléments de même ID lors d'événements de clic. Voici le problème :

<button>

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

Cependant, ce script jQuery ne capture que la valeur du premier bouton ("XYZ1"). Cliquer sur les autres boutons ne déclenche aucune réponse.

La raison de ce comportement réside dans la nature des attributs de l'ID HTML. Selon les spécifications HTML, les valeurs d'ID doivent être uniques au sein d'un document. L'attribution du même identifiant à plusieurs éléments viole cette règle, ce qui fait que les navigateurs ne renvoient que le premier élément correspondant lors d'une requête par ID.

Solution : identifiants uniques avec classe

À résolvez ce problème, remplacez les attributs d'ID par des attributs de classe :

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

Maintenant, utilisez le sélecteur de classe dans jQuery :

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

Ce code récupérera avec succès les valeurs des trois boutons en cliquant. Au lieu de s'appuyer sur un sélecteur d'ID peu fiable, les attributs de classe fournissent des identifiants uniques pour plusieurs éléments similaires et permettent la récupération d'informations spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!