Impossible de mettre à jour la valeur d'un attribut de données

Question

Bien qu'il existe des exemples de ce type sur le web, il ne semble pas fonctionner correctement. Je n'arrive pas à comprendre le problème.

J'ai ce simple HTML

<div id="foo" data-num="0"></ div>
<a href="#" id="changeData">change data value</a>

Chaque fois que je clique sur le lien "changer la valeur des données", je veux mettre à jour la valeur des données de data-num. Par exemple, j'ai besoin qu'elle soit 1,2,3,4,... (plus 1 à chaque fois que je clique sur le lien).

ce que j'ai est

var num = $('#foo').data("num");
console.log(num);
num = num+1;               
console.log(num);
$('#foo').attr('data-num', num);   

La valeur change une fois de 0 à 1 à chaque fois. Je ne peux pas la rendre incrémentielle. Avez-vous des suggestions sur ce que je fais de mal ?

Answer 1

En fait, il existe deux façons de définir/mettre à jour la valeur d'un attribut de données, en fonction de vos besoins. La différence réside simplement dans l'endroit où les données sont enregistrées,

Si vous utilisez .data() il sera enregistré dans une variable locale appelée data_user et ce n'est pas visible à l'inspection des éléments, Si vous utilisez .attr() il sera publiquement visible.

Une explication beaucoup plus claire sur ce commentaire

Answer 2

Cette réponse s'adresse à ceux qui souhaitent simplement modifier la valeur d'un attribut de données.

La suggestion ne modifiera pas correctement la valeur de l'élément de données Jquery, comme l'a indiqué @adeneo. Pour une raison quelconque, cependant, je ne le vois pas (ni aucun autre) poster la méthode correcte pour ceux qui cherchent à mettre à jour leur data-attr. La réponse que @Lucas Willems a postée peut être la réponse au problème que Brian Tompsett rencontre, mais ce n'est pas la réponse à la question qui peut amener d'autres utilisateurs ici.

Réponse rapide à la demande de renseignements initiale

-Mettre à jour les données-attr

$('#ElementId').attr('data-attributeTitle',newAttributeValue);

Erreurs faciles* - il doit y avoir "data-" au début de l'attribut dont vous cherchez à changer la valeur.

Answer 3

J'ai eu un problème similaire, je propose cette solution bien qu'elle ne soit pas supportée dans IE 10 et moins.

Étant donné que

<div id='example' data-example-update='1'></div>

La norme Javascript définit une propriété appelée dataset pour mettre à jour data-example-update.

document.getElementById('example').dataset.exampleUpdate = 2;

Remarque : utilisez la notation en majuscules pour accéder à l'attribut de données correct.

Source : https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Answer 4

J'ai eu le même problème avec la balise html data qui ne se mettait pas à jour quand j'utilisais jquery. Mais en changeant le code qui fait le travail réel de jquery à javascript, ça a marché.

Essayez d'utiliser ceci lorsque le bouton est cliqué : _(Notez que le code principal est constitué de Javascripts setAttribute() fonction.)_

function increment(q) {

    //increment current num by adding with 1
    q = q+1;

    //change data attribute using JS setAttribute function
    div.setAttribute('data-num',q);

    //refresh data-num value (get data-num value again using JS getAttribute function)
    num = parseInt(div.getAttribute('data-num'));

    //show values
    console.log("(After Increment) Current Num: "+num);

}

//get variables, set as global vars
var div = document.getElementById('foo');
var num = parseInt(div.getAttribute('data-num'));

//increment values using click
$("#changeData").on('click',function(){

    //pass current data-num as parameter
    increment(num);

});