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
Libérer: 2024-12-28 11:58:10
original
415 Les gens l'ont consulté

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")
Copier après la connexion

À 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")
Copier après la connexion

Exemple de mise en œuvre

Considérez le Code HTML et JavaScript suivant :

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

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal