suchen
HeimWeb-Frontendjs-TutorialWie kann ich mit jQuery Quicksand das Attribut „data-id' von angeklickten Elementen abrufen?

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

Abrufen des Daten-ID-Attributs für angeklickte Elemente in jQuery Quicksand

Bei der Arbeit mit dem jQuery Quicksand-Plugin ist das Abrufen des Daten-ID-Attributs angeklickter Elemente unerlässlich Weitergabe an Webdienste oder Durchführung weiterer Aktionen. Dieser Artikel soll eine umfassende Lösung für diese Anforderung bieten.

Mit dem Quicksand-Plugin können Sie Elemente dynamisch sortieren oder filtern, ohne die Seite neu laden zu müssen. Um Klickereignisse an die sortierten oder gefilterten Elemente zu binden, wird die Methode .on() verwendet. Es ist jedoch erforderlich, auf das Daten-ID-Attribut zuzugreifen, um spezifische Informationen abzurufen, die mit dem angeklickten Element verknüpft sind.

Erhalten des Daten-ID-Attributs

Um den Daten-ID-Attributwert abzurufen, jQuery bietet zwei Methoden:

Verwendung von .attr():

Diese Methode ruft das Attribut direkt ab Wert als Zeichenfolge.

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

Mit .data():

Diese in jQuery 1.4.3 veröffentlichte Methode ruft den Attributwert als analysierten Datentyp ab (falls möglich).

$(this).data("id")

Beispielimplementierung

Berücksichtigen Sie die Folgender HTML- und JavaScript-Code:


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

    In diesem Beispiel kann auf den Wert des data-id-Attributs je nach verwendeter jQuery-Version mit der Methode .attr() oder .data() zugegriffen werden. Wenn auf das Element mit data-id="id-40" geklickt wird, wird in einem Warndialog der Wert angezeigt.

    Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery Quicksand das Attribut „data-id' von angeklickten Elementen abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Stellungnahme
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Ersetzen Sie Stringzeichen in JavaScriptErsetzen Sie Stringzeichen in JavaScriptMar 11, 2025 am 12:07 AM

    Detaillierte Erläuterung der Methode für JavaScript -Zeichenfolge und FAQ In diesem Artikel werden zwei Möglichkeiten untersucht, wie String -Zeichen in JavaScript ersetzt werden: Interner JavaScript -Code und interne HTML für Webseiten. Ersetzen Sie die Zeichenfolge im JavaScript -Code Die direkteste Möglichkeit ist die Verwendung der Ersatz () -Methode: str = str.replace ("find", "ersetzen"); Diese Methode ersetzt nur die erste Übereinstimmung. Um alle Übereinstimmungen zu ersetzen, verwenden Sie einen regulären Ausdruck und fügen Sie das globale Flag G hinzu:: STR = Str.Replace (/fi

    Erstellen Sie Ihre eigenen AJAX -WebanwendungenErstellen Sie Ihre eigenen AJAX -WebanwendungenMar 09, 2025 am 12:11 AM

    Hier sind Sie also bereit, alles über dieses Ding namens Ajax zu lernen. Aber was genau ist das? Der Begriff AJAX bezieht sich auf eine lose Gruppierung von Technologien, mit denen dynamische, interaktive Webinhalte erstellt werden. Der Begriff Ajax, ursprünglich von Jesse J geprägt

    10 JQuery Fun- und Games -Plugins10 JQuery Fun- und Games -PluginsMar 08, 2025 am 12:42 AM

    10 Fun JQuery Game -Plugins, um Ihre Website attraktiver zu machen und die Stickinität der Benutzer zu verbessern! Während Flash immer noch die beste Software für die Entwicklung von lässigen Webspielen ist, kann JQuery auch überraschende Effekte erzielen und zwar nicht mit reinen Action -Flash -Spielen vergleichbar sind, aber in einigen Fällen können Sie auch einen unerwarteten Spaß in Ihrem Browser haben. JQuery Tic Toe Game Die "Hello World" der Game -Programmierung hat jetzt eine Jquery -Version. Quellcode JQuery Crazy Word Kompositionsspiel Dies ist ein Spiel mit der Füllung, und es kann einige seltsame Ergebnisse erzielen, da das Wort nicht kennt. Quellcode JQuery Mine Sweeping Game

    Wie erstelle ich meine eigenen JavaScript -Bibliotheken?Wie erstelle ich meine eigenen JavaScript -Bibliotheken?Mar 18, 2025 pm 03:12 PM

    In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.

    JQuery Parallax Tutorial - Animated Header HintergrundJQuery Parallax Tutorial - Animated Header HintergrundMar 08, 2025 am 12:39 AM

    Dieses Tutorial zeigt, wie ein faszinierender Parallaxen -Hintergrundeffekt mit JQuery erstellt wird. Wir werden ein Header -Banner mit geschichteten Bildern bauen, die eine atemberaubende visuelle Tiefe erzeugen. Das aktualisierte Plugin funktioniert mit JQuery 1.6.4 und später. Laden Sie die herunter

    Wie optimiere ich den JavaScript -Code für die Leistung im Browser?Wie optimiere ich den JavaScript -Code für die Leistung im Browser?Mar 18, 2025 pm 03:14 PM

    In dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.

    Erste Schritte mit Matter.js: EinführungErste Schritte mit Matter.js: EinführungMar 08, 2025 am 12:53 AM

    Matter.js ist eine in JavaScript geschriebene 2D -Motorhilfe -Physik -Engine. Diese Bibliothek kann Ihnen helfen, die 2D -Physik in Ihrem Browser problemlos zu simulieren. Es bietet viele Merkmale, wie die Möglichkeit, starre Körper zu erstellen und physikalische Eigenschaften wie Masse, Fläche oder Dichte zuzuweisen. Sie können auch verschiedene Arten von Kollisionen und Kräften simulieren, wie z. B. die Schwerkraft Reibung. Matter.js unterstützt alle Mainstream -Browser. Darüber hinaus ist es für mobile Geräte geeignet, da es Berührungen erkennt und reagiert. Alle diese Funktionen machen es Ihre Zeit wert, zu lernen, wie man die Engine benutzt. In diesem Tutorial werde ich die Grundlagen dieser Bibliothek, einschließlich ihrer Installation und Nutzung, behandeln und a bereitstellen

    Automatische Aktualisierung der Div -Inhalte mit JQuery und AjaxAutomatische Aktualisierung der Div -Inhalte mit JQuery und AjaxMar 08, 2025 am 12:58 AM

    Dieser Artikel zeigt, wie Sie den Inhalt eines DIV automatisch alle 5 Sekunden mit JQuery und Ajax aktualisieren können. Das Beispiel holt und zeigt die neuesten Blog -Beiträge aus einem RSS -Feed zusammen mit dem letzten Aktualisierungstempel. Ein Ladebild ist Optiona

    See all articles

    Heiße KI -Werkzeuge

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    AI Hentai Generator

    AI Hentai Generator

    Erstellen Sie kostenlos Ai Hentai.

    Heiße Werkzeuge

    SublimeText3 Englische Version

    SublimeText3 Englische Version

    Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

    mPDF

    mPDF

    mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),

    SAP NetWeaver Server-Adapter für Eclipse

    SAP NetWeaver Server-Adapter für Eclipse

    Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

    SublimeText3 Mac-Version

    SublimeText3 Mac-Version

    Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

    MantisBT

    MantisBT

    Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.