No se puede actualizar el valor del atributo de datos

Aunque hay algunos ejemplos sobre esto en la web, no parece funcionar correctamente. No puedo resolver el problema.

Tengo este html simple

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

Cada vez que hago clic en el enlace "cambiar valor de datos" quiero actualizar el valor de datos de data-num. Por ejemplo, necesito que sea 1,2,3,4, ... (más 1 cada vez que hago clic en el enlace)

lo que tengo es

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

El valor cambia una vez de 0 a 1 cada vez. No puedo hacerlo incremental. ¿Alguna sugerencia de lo que estoy haciendo mal?

LA RESPUESTA A CONTINUACIÓN ES LA BUENA

No está utilizando el método de datos correctamente. El código correcto para actualizar los datos es:

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

Entonces tu ejemplo sería:

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

Úselo en su lugar, si desea cambiar el atributo número de datos del elemento de nodo, no del objeto de datos :

MANIFESTACIÓN

$('#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);
});

PD: pero deberías usar el objeto data () en prácticamente todos los casos, pero no en todos ...

Si quisiéramos recuperar o actualizar estos atributos usando JavaScript nativo existente , entonces podemos hacerlo usando los métodos getAttributey setAttributecomo se muestra a continuación:

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>

A través de 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'); 

Lea esta documentación para vanilla js o esta documentación para jquery

Para mí, al usar Jquery lib 2.1.1 lo siguiente NO funcionó de la manera que esperaba:

Establecer valor de atributo de datos de elemento:

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

PERO el elemento en sí permanece sin el atributo:

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

Necesitaba el DOM actualizado para luego poder hacer $ ('. My-class [data-num = "myValue"]') // la longitud actual es 0

Así que tuve que hacer

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

Para que el DOM se actualice:

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

Si el atributo existe o no, $ .attr se sobrescribirá.

Tuve un problema similar y al final tuve que configurar ambos

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

y

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

Y despues de esto

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

Espero que esto ayude.

Básicamente, hay dos formas de establecer / actualizar el valor del atributo de datos, según sus necesidades. La diferencia es solo, dónde se guardaron los datos,

Si lo usa .data(), se guardará en la variable local llamada data_usery no .attr()será visible en la inspección del elemento. Si lo usa , será visible públicamente.

Explicación mucho más clara sobre este comentario.

Esta respuesta es para aquellos que buscan simplemente cambiar el valor de un atributo de datos

Lo sugerido no cambiará el valor de su attr de datos de Jquery correctamente como ha indicado @adeneo. Sin embargo, por alguna razón, no lo veo (ni a ningún otro) publicar el método correcto para aquellos que buscan actualizar su data-attr. La respuesta que @Lucas Willems ha publicado puede ser la respuesta al problema que Brian Tompsett - 汤 莱恩 está teniendo, pero no es la respuesta a la consulta que puede traer a otros usuarios aquí.

Respuesta rápida con respecto a la declaración de consulta original

-Para actualizar data-attr

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

Errores fáciles *: debe haber "datos-" al comienzo del atributo del que desea cambiar el valor.

Tuve un problema similar, propongo esta solución, aunque no es compatible con IE 10 y versiones anteriores.

Dado

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

El estándar Javascript define una propiedad llamada conjunto de datos para actualizar data-example-update.

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

Nota: utilice la notación de mayúsculas y minúsculas para acceder al atributo de datos correcto.

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

Tuve el mismo problema de que la etiqueta de datos html no se actualizaba cuando estaba usando jquery, pero cambiar el código que hace el trabajo real de jquery a javascript funcionó.

Intente usar esto cuando se haga clic en el botón: (Tenga en cuenta que el código principal es la función setAttribute () de Javascripts ) .

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

});