22 Voix

jQuery: Lire et Modifier les Valeurs d'Attributs Data

Tutoriel de Stefan Trost | 05/05/2022 à 01:15

Dans ce tutoriel, je voudrais vous montrer comment lire et modifier les valeurs d'attribut data des éléments HTML arbitraires à l'aide de JavaScript et jQuery.

J'ai divisé le tutoriel en les sections suivantes:

Comme exemple, nous aimerions utiliser le HTML suivant:

<div id="mydiv" data-a="1" data-b="2"></div>

Comme vous pouvez le voir, il s'agit d'un élément DIV avec l'ID "mydiv" ayant attribué 2 attributs data. En détail, c'est l'attribut "data-a" avec la valeur 1 et "data-b" avec la valeur 2.

Comment lire les Valeurs d'Attribut Data

Pour lire les attributs data, jQuery nous aide à offrir la méthode .data(). Jetons un coup d'œil à un exemple:

var a = $("#mydiv").data("a");
var b = $("#mydiv").data("b");

var c = a + b;

alert(c);

Ici, nous lisons les deux attributs data de l'élément DIV, nous résumons les valeurs et montrons une alerte contenant le résultat.

Concrètement, nous utilisons le sélecteur $("#mydiv") afin de sélectionner le élément DIV. Ensuite, nous utilisons .data("a") et .data("b") pour obtenir les valeurs des attributs. Nous les stockons dans les variables a et b, nous gardons la somme en variable c et sortie c avec alert().

Comme vous pouvez le voir, lorsque vous utilisez .data(), nous n'avons pas à écrire "data-a" ou "data-b". Il suffit d'écrire "a" et "b" pour accéder aux valeurs.

Comment écrire des Valeurs d'Attribut Data

Lorsque nous passons un deuxième paramètre à .data(), ce paramètre est écrit à l'attribut data correspondant. Voici un petit exemple:

var a_new = 10;

$("#mydiv").data("a", a_new);
$("#mydiv").data("b", "test");

Encore une fois, nous utilisons le sélecteur $("#mydiv") afin de sélectionner le DIV. Après cela, nous définissons l'attribut data "a" sur une variable que nous avons définie auparavant et nous définissons "b" sur une chaîne que nous avons spécifié directement. En faisant cela, nous obtenons le résultat suivant:

<div id="mydiv" data-a="10" data-b="test"></div>

Comment lire et écrire tous les Attributs

En tant que classification et petite digression, il ne devrait pas être sans mention à ce stade, comment nous pouvons lire et écrire d'autres attributs, par exemple des attributs qui ne commencent pas par le préfixe "data-".

Pour ces attributs, nous pouvons utiliser la méthode .attr(). La fonctionnalité est comparable à celle de .data():

// lire
var id = $("#mydiv").attr("id");
var a  = $("#mydiv").attr("data-a");

// écrire
$("#mydiv").attr("id", "new_id");
$("#mydiv").attr("data-a", 10);

Ici, nous lisons la valeur de l'ID de notre élément DIV et plus tard, nous modifions cette valeur en "new_id". Si nous voulons accéder aux attributs data à l'aide de .attr(), nous devons maintenant utiliser le nom complet, dans notre exemple "data-a" au lieu de "a" comme utilisé avec .data().

RépondrePositifNégatif

Sur l’Auteur

AvatarVous pouvez trouver des logiciels de Stefan Trost sur fr.sttmedia.com. Avez-vous besoin d'un logiciel personnalisé selon vos propres besoins? Écrivez-nous: fr.sttmedia.com/contact
Voir Profil

 

Sujets Connexes

Types de Sujets sur askingbox.com

Article | 0 Commentaires

Avis Important

Veuillez noter: Les contributions publiées sur askingbox.com sont des contributions d’utilisateurs et ne doivent pas remplacer les conseils d’un professionnel. Ils ne sont pas vérifiés par des indépendants et ne reflètent pas nécessairement l’opinion de askingbox.com. Apprendre encore plus.

Participer

Posez votre propre question ou écrivez votre propre article sur askingbox.com. Voici comment.