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

Bien qu'il existe quelques exemples à ce sujet sur le Web, cela ne semble pas fonctionner correctement. Je ne peux 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 «modifier la valeur des données», je souhaite mettre à jour la valeur des données de data-num. Par exemple, j'en ai besoin pour 1,2,3,4, ... (plus 1 à chaque fois que je clique sur le lien)

ce que j'ai c'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 le faire progressivement. Des suggestions sur ce que je fais mal?

LA RÉPONSE CI-DESSOUS EST LA BONNE

Vous n'utilisez pas correctement la méthode de données . Le code correct pour mettre à jour les données est:

$('#foo').data('num', num); 

Donc, votre exemple serait:

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

Utilisez-le à la place, si vous souhaitez modifier l'attribut data-num de l'élément node, pas de l'objet data :

DEMO

$('#changeData').click(function (e) { 
    e.preventDefault();
    var num = +$('#foo').attr("data-num");
    console.log(num);
    num = num + 1;
    console.log(num);
    $('#foo').attr('data-num', num);
});

PS: mais vous devriez utiliser l'objet data () dans pratiquement tous les cas, mais pas tous ...

Si nous voulions récupérer ou mettre à jour ces attributs à l'aide de JavaScript natif existant, nous pouvons le faire en utilisant les méthodes getAttributeet setAttributecomme indiqué ci-dessous:

JavaScript

<script>
// 'Getting' data-attributes using getAttribute
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'

// 'Setting' data-attributes using setAttribute
plant.setAttribute('data-fruit','7'); // Pesky birds
</script>

Grâce à jQuery

// Fetching data
var fruitCount = $(this).data('fruit');

// Above does not work in firefox. So use below to get attribute value.
var fruitCount = $(this).attr('data-fruit');

// Assigning data
$(this).data('fruit','7');

// But when you get the value again, it will return old value. 
// You have to set it as below to update value. Then you will get updated value.
$(this).attr('data-fruit','7'); 

Lisez cette documentation pour vanilla js ou cette documentation pour jquery

Pour moi, en utilisant Jquery lib 2.1.1, ce qui suit n'a PAS fonctionné comme je m'y attendais:

Définir la valeur d'attribut de données d'élément:

$('.my-class').data('num', 'myValue');
console.log($('#myElem').data('num'));// as expected = 'myValue'

MAIS l'élément lui-même reste sans l'attribut:

<div class="my-class"></div>

J'avais besoin de mettre à jour le DOM pour pouvoir faire plus tard $ ('. My-class [data-num = "myValue"]') // la longueur actuelle est de 0

Alors je devais faire

$('.my-class').attr('data-num', 'myValue');

Pour mettre à jour le DOM:

<div class="my-class" data-num="myValue"></div>

Que l'attribut existe ou non, $ .attr sera écrasé.

J'ai eu un problème similaire et à la fin j'ai dû régler les deux

obj.attr('data-myvar','myval')

et

obj.data('myvar','myval')

Et après ça

obj.data('myvar') == obj.attr('data-myvar')

J'espère que cela t'aides.

Fondamentalement, il existe deux façons de définir / mettre à jour la valeur de l'attribut de données, en fonction de vos besoins. La différence est juste, où les données sont enregistrées,

Si vous l'utilisez, .data()il sera enregistré dans la variable locale appelée data_user, et ne sera pas visible lors de l'inspection de l'élément.Si vous l'utilisez, .attr()il sera visible publiquement.

Explication beaucoup plus claire sur ce commentaire

Cette réponse est pour ceux qui cherchent à changer simplement la valeur d'un attribut de données

La suggestion ne changera pas correctement la valeur de votre data-attr Jquery comme @adeneo l'a indiqué. Pour une raison quelconque, je ne le vois pas (ni aucun autre) publier la bonne méthode pour ceux qui cherchent à mettre à jour leur data-attr. La réponse que @Lucas Willems a publiée est peut-être la réponse au problème de Brian Tompsett - 汤 莱恩, mais ce n'est pas la réponse à la demande qui pourrait amener d'autres utilisateurs ici.

Réponse rapide en ce qui concerne la déclaration d'enquête originale

-Pour mettre à jour les données-attr

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

Erreurs faciles * - il doit y avoir "data-" au début de votre attribut dont vous souhaitez modifier la valeur.

Eu un problème similaire, je propose cette solution même si elle n'est pas prise en charge dans IE 10 et moins.

Donné

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

Le standard 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 cas de chameau pour accéder à l'attribut de données correct.

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

J'ai eu le même problème de la balise de données html ne se mettant pas à jour lorsque j'utilisais jquery Mais changer le code qui fait le travail réel de jquery à javascript a fonctionné.

Essayez d'utiliser ceci lorsque vous cliquez sur le bouton: (Notez que le code principal est la fonction Javascripts setAttribute () .)

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

});