Maison >interface Web >js tutoriel >Comment puis-je récupérer l'attribut « data-id » des éléments cliqués à l'aide de jQuery Quicksand ?

Comment puis-je récupérer l'attribut « data-id » des éléments cliqués à l'aide de jQuery Quicksand ?

Susan Sarandon
Susan Sarandonoriginal
2024-12-28 11:58:10412parcourir

How Can I Retrieve the `data-id` Attribute of Clicked Items Using jQuery Quicksand?

Récupération de l'attribut Data-id pour les éléments cliqués dans jQuery Quicksand

Lorsque vous travaillez avec le plugin jQuery Quicksand, l'obtention de l'attribut data-id des éléments cliqués est essentielle pour le transmettre aux services Web ou effectuer d'autres actions. Cet article a pour objectif d'apporter une solution complète à cette exigence.

Le plugin Quicksand permet de trier ou filtrer des éléments de manière dynamique sans recharger la page. Pour lier les événements de clic aux éléments triés ou filtrés, la méthode .on() est utilisée. Cependant, il devient nécessaire d'accéder à l'attribut data-id pour récupérer des informations spécifiques associées à l'élément cliqué.

Obtention de l'attribut Data-id

Pour récupérer la valeur de l'attribut data-id, jQuery propose deux méthodes :

Utilisation de .attr() :

Cette méthode récupère directement le valeur d'attribut sous forme de chaîne.

$(this).attr("data-id")

À l'aide de .data() :

Publiée dans jQuery 1.4.3, cette méthode récupère la valeur d'attribut sous forme de données analysées tapez (si possible).

$(this).data("id")

Exemple de mise en œuvre

Considérez le Code HTML et JavaScript suivant :

<ul>
$("#list li").on('click', function() {
  let dataId = $(this).attr("data-id") || $(this).data("id");
  alert(dataId);
});

Dans cet exemple, la valeur de l'attribut data-id est accessible à l'aide de la méthode .attr() ou .data() selon la version de jQuery utilisée. Lorsque l'élément avec data-id="id-40" est cliqué, une boîte de dialogue d'alerte affichera la valeur.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn