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

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 :


    $("#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
    Python vs JavaScript: une analyse comparative pour les développeursPython vs JavaScript: une analyse comparative pour les développeursMay 09, 2025 am 12:22 AM

    La principale différence entre Python et JavaScript est le système de type et les scénarios d'application. 1. Python utilise des types dynamiques, adaptés à l'informatique scientifique et à l'analyse des données. 2. JavaScript adopte des types faibles et est largement utilisé pour le développement frontal et complet. Les deux ont leurs propres avantages dans la programmation asynchrone et l'optimisation des performances, et doivent être décidées en fonction des exigences du projet lors du choix.

    Python vs JavaScript: Choisir le bon outil pour le travailPython vs JavaScript: Choisir le bon outil pour le travailMay 08, 2025 am 12:10 AM

    Que ce soit pour choisir Python ou JavaScript dépend du type de projet: 1) Choisissez Python pour les tâches de science et d'automatisation des données; 2) Choisissez JavaScript pour le développement frontal et complet. Python est favorisé pour sa bibliothèque puissante dans le traitement et l'automatisation des données, tandis que JavaScript est indispensable pour ses avantages dans l'interaction Web et le développement complet.

    Python et Javascript: comprendre les forces de chacunPython et Javascript: comprendre les forces de chacunMay 06, 2025 am 12:15 AM

    Python et JavaScript ont chacun leurs propres avantages, et le choix dépend des besoins du projet et des préférences personnelles. 1. Python est facile à apprendre, avec une syntaxe concise, adaptée à la science des données et au développement back-end, mais a une vitesse d'exécution lente. 2. JavaScript est partout dans le développement frontal et possède de fortes capacités de programmation asynchrones. Node.js le rend adapté au développement complet, mais la syntaxe peut être complexe et sujet aux erreurs.

    Core de JavaScript: est-il construit sur C ou C?Core de JavaScript: est-il construit sur C ou C?May 05, 2025 am 12:07 AM

    Javascriptisnotbuiltoncorc; il est en interprétéLanguageThatrunSoninesoftenwritteninc .1) javascriptwasdesignedasalightweight, interprété de LanguageForwebbrowsers.2) EnginesevolvedFromSimpleInterpreterstoJitCompilers, typicalinc, impropringperformance.

    Applications JavaScript: de front-end à back-endApplications JavaScript: de front-end à back-endMay 04, 2025 am 12:12 AM

    JavaScript peut être utilisé pour le développement frontal et back-end. L'endouage frontal améliore l'expérience utilisateur via les opérations DOM, et le back-end gère les tâches du serveur via Node.js. 1. Exemple frontal: modifiez le contenu du texte de la page Web. 2. Exemple backend: Créez un serveur Node.js.

    Python vs JavaScript: Quelle langue devez-vous apprendre?Python vs JavaScript: Quelle langue devez-vous apprendre?May 03, 2025 am 12:10 AM

    Le choix de Python ou JavaScript doit être basé sur le développement de carrière, la courbe d'apprentissage et l'écosystème: 1) le développement de carrière: Python convient à la science des données et au développement de back-end, tandis que JavaScript convient au développement frontal et complet. 2) Courbe d'apprentissage: la syntaxe Python est concise et adaptée aux débutants; La syntaxe JavaScript est flexible. 3) Ecosystème: Python possède de riches bibliothèques informatiques scientifiques, et JavaScript a un puissant cadre frontal.

    Frameworks javascript: alimenter le développement Web moderneFrameworks javascript: alimenter le développement Web moderneMay 02, 2025 am 12:04 AM

    La puissance du cadre JavaScript réside dans la simplification du développement, l'amélioration de l'expérience utilisateur et les performances des applications. Lorsque vous choisissez un cadre, considérez: 1. Taille et complexité du projet, 2. Expérience d'équipe, 3. Écosystème et soutien communautaire.

    La relation entre JavaScript, C et BrowsersLa relation entre JavaScript, C et BrowsersMay 01, 2025 am 12:06 AM

    INTRODUCTION Je sais que vous pouvez le trouver étrange, que doit faire exactement JavaScript, C et Browser? Ils semblent sans rapport, mais en fait, ils jouent un rôle très important dans le développement Web moderne. Aujourd'hui, nous discuterons du lien étroit entre ces trois. Grâce à cet article, vous apprendrez comment JavaScript fonctionne dans le navigateur, le rôle de C dans le moteur du navigateur et comment ils fonctionnent ensemble pour stimuler le rendu et l'interaction des pages Web. Nous connaissons tous la relation entre JavaScript et Browser. JavaScript est la langue principale du développement frontal. Il fonctionne directement dans le navigateur, rendant les pages Web vives et intéressantes. Vous êtes-vous déjà demandé pourquoi javascr

    See all articles

    Outils d'IA chauds

    Undresser.AI Undress

    Undresser.AI Undress

    Application basée sur l'IA pour créer des photos de nu réalistes

    AI Clothes Remover

    AI Clothes Remover

    Outil d'IA en ligne pour supprimer les vêtements des photos.

    Undress AI Tool

    Undress AI Tool

    Images de déshabillage gratuites

    Clothoff.io

    Clothoff.io

    Dissolvant de vêtements AI

    Video Face Swap

    Video Face Swap

    Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

    Outils chauds

    Télécharger la version Mac de l'éditeur Atom

    Télécharger la version Mac de l'éditeur Atom

    L'éditeur open source le plus populaire

    SublimeText3 version anglaise

    SublimeText3 version anglaise

    Recommandé : version Win, prend en charge les invites de code !

    Adaptateur de serveur SAP NetWeaver pour Eclipse

    Adaptateur de serveur SAP NetWeaver pour Eclipse

    Intégrez Eclipse au serveur d'applications SAP NetWeaver.

    PhpStorm version Mac

    PhpStorm version Mac

    Le dernier (2018.2.1) outil de développement intégré PHP professionnel

    MinGW - GNU minimaliste pour Windows

    MinGW - GNU minimaliste pour Windows

    Ce projet est en cours de migration vers osdn.net/projects/mingw, vous pouvez continuer à nous suivre là-bas. MinGW : un port Windows natif de GNU Compiler Collection (GCC), des bibliothèques d'importation et des fichiers d'en-tête librement distribuables pour la création d'applications Windows natives ; inclut des extensions du runtime MSVC pour prendre en charge la fonctionnalité C99. Tous les logiciels MinGW peuvent fonctionner sur les plates-formes Windows 64 bits.