Comment extraire un attribut de données d'une classe en un clic en JavaScript ?

Écouteurs d'événements et extraction d'attributs basés sur les classes en JavaScript

En JavaScript, l'ajout d'écouteurs d'événements aux éléments est crucial pour interagir avec le DOM. Dans ce cas, vous souhaitez récupérer un attribut d'une classe lorsque vous cliquez dessus. Le code suivant illustre l'approche :

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);
}

Ce code sélectionne les éléments portant le nom de classe "classname", les affecte à un objet de type tableau nommé elements, puis parcourt les éléments. Pour chaque élément, un écouteur d'événement est ajouté à l'événement 'click', qui déclenche la fonction myFunction lorsqu'un élément est cliqué. Dans cette fonction, la méthode getAttribute récupère la valeur « data-myattribute » de l'élément cliqué et affiche une alerte avec la valeur de l'attribut.

N'oubliez pas que getElementsByClassName renvoie un objet de type tableau, pas un tableau. Par conséquent, la boucle est nécessaire pour parcourir chaque élément et ajouter l'écouteur d'événement individuellement.

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!