Wie extrahiere ich ein Datenattribut aus einer Klasse per Klick in JavaScript?

Ereignis-Listener und klassenbasierte Attributextraktion in JavaScript

In JavaScript ist das Hinzufügen von Ereignis-Listenern zu Elementen für die Interaktion mit dem DOM von entscheidender Bedeutung. In diesem Fall möchten Sie beim Klicken ein Attribut aus einer Klasse abrufen. Der folgende Code demonstriert den Ansatz:

var elements = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

Dieser Code wählt Elemente mit dem Klassennamen „classname“ aus, weist sie einem Array-ähnlichen Objekt namens „Elements“ zu und durchläuft dann die Elemente in einer Schleife. Für jedes Element wird dem „click“-Ereignis ein Ereignis-Listener hinzugefügt, der die Funktion myFunction auslöst, wenn auf ein Element geklickt wird. Innerhalb dieser Funktion ruft die getAttribute-Methode den „data-myattribute“-Wert des angeklickten Elements ab und zeigt eine Warnung mit dem Attributwert an.

Denken Sie daran, dass getElementsByClassName ein Array-ähnliches Objekt zurückgibt, kein Array. Daher ist die Schleife erforderlich, um jedes Element zu durchlaufen und den Ereignis-Listener einzeln hinzuzufügen.

Das obige ist der detaillierte Inhalt vonWie extrahiere ich ein Datenattribut aus einer Klasse per Klick in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!