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

Utilisez cela à la place, si vous souhaitez modifier l'attribut data-num de l'élément de nœud, et non de l'objet de données :

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...

Answer 2

LA RÉPONSE CI-DESSOUS EST LA BONNE

Vous n'utilisez pas le méthode de données correctement. 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)

Answer 3

Si nous voulions récupérer ou mettre à jour ces attributs à l'aide d'un système natif existant JavaScript nous pouvons le faire en utilisant l'option getAttribute et setAttribute comme 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

Answer 4

Pour ma part, en utilisant Jquery lib 2.1.1, ce qui suit n'a PAS fonctionné comme je l'espérais :

Définir la valeur de l'attribut de données de l'é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 que le DOM soit mis à jour pour que je puisse faire plus tard $('.my-class[data-num="myValue"]') //la longueur actuelle est 0

Donc je devais faire

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

Pour que le DOM soit mis à jour :

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

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

Answer 5

J'ai eu le même problème et j'ai fini par régler les deux

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

et

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

Et après cela

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

J'espère que cela vous aidera.