Não é possível atualizar o valor do atributo de dados

Embora existam alguns exemplos sobre isso na web, não parece funcionar corretamente. Eu não consigo descobrir o problema.

Eu tenho este html simples

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

Cada vez que clico no link "alterar valor dos dados", quero atualizar o valor dos dados de data-num. Por exemplo, preciso que seja 1,2,3,4, ... (mais 1 toda vez que clico no link)

o que eu tenho é

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

O valor muda uma vez de 0 para 1 todas as vezes. Não posso torná-lo incremental. Alguma sugestão do que estou fazendo de errado?

A RESPOSTA ABAIXO É BOA

Você não está usando o método de dados corretamente. O código correto para atualizar os dados é:

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

Então, seu exemplo seria:

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

Em vez disso, use-o se desejar alterar o atributo data-num do elemento node, não do objeto de dados :

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: mas você deve usar o objeto data () em praticamente todos os casos, mas não em todos ...

Se quisermos recuperar ou atualizar esses atributos usando JavaScript nativo existente, podemos fazer isso usando os métodos getAttributee setAttributeconforme mostrado abaixo:

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>

Por meio do 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'); 

Leia esta documentação para vanilla js ou esta documentação para jquery

Para mim, usando Jquery lib 2.1.1 o seguinte NÃO funcionou da maneira que eu esperava:

Defina o valor do atributo de dados do elemento:

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

MAS o próprio elemento permanece sem o atributo:

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

Eu precisava do DOM atualizado para que eu pudesse fazer $ ('. My-class [data-num = "myValue"]') // o comprimento atual é 0

Então eu tive que fazer

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

Para fazer com que o DOM seja atualizado:

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

Se o atributo existe ou não, $ .attr sobrescreverá.

Tive um problema semelhante e no final tive que definir ambos

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

e

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

E depois disso

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

Espero que isto ajude.

Basicamente, existem duas maneiras de definir / atualizar o valor do atributo de dados, dependendo da sua necessidade. A diferença é apenas onde os dados salvos,

Se você usá- .data()lo, ele será salvo na variável local chamada data_usere não .attr()ficará visível na inspeção do elemento. Se você usá- lo, ele ficará publicamente visível.

Explicação muito mais clara sobre este comentário

Esta resposta é para aqueles que procuram apenas alterar o valor de um atributo de dados

O sugerido não mudará o valor de seu data-attr Jquery corretamente como @adeneo declarou. Por alguma razão, porém, não estou vendo ele (ou qualquer outra pessoa) postar o método correto para aqueles que buscam atualizar seus atributos de dados. A resposta que @Lucas Willems postou pode ser a resposta ao problema que Brian Tompsett - 汤 莱恩 está tendo, mas não é a resposta à pergunta que pode estar trazendo outros usuários aqui.

Resposta rápida em relação à declaração de inquérito original

-Para atualizar data-attr

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

Erros fáceis * - deve haver "dados-" no início do atributo que você deseja alterar.

Tive um problema semelhante, proponho esta solução embora não seja suportada no IE 10 e inferior.

Dado

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

O padrão Javascript define uma propriedade chamada dataset para atualizar data-example-update.

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

Nota: use a notação camel case para acessar o atributo de dados correto.

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

Eu tive o mesmo problema de tag de dados html não atualizando quando eu estava usando jquery, mas mudar o código que faz o trabalho real de jquery para javascript funcionou.

Tente usar isto quando o botão for clicado: (Observe que o código principal é a função 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);

});