Impossibile aggiornare il valore dell'attributo dati

Sebbene ci siano alcuni esempi su questo sul web, non sembra funzionare correttamente. Non riesco a capire il problema.

Ho questo semplice html

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

Ogni volta che clicco sul collegamento "modifica valore dati" desidero aggiornare il valore dati di data-num. Ad esempio, ho bisogno che sia 1,2,3,4, ... (più 1 ogni volta che faccio clic sul collegamento)

quello che ho è

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

Il valore cambia una volta da 0 a 1 ogni volta. Non posso renderlo incrementale. Qualche suggerimento su cosa sto sbagliando?

LA RISPOSTA SOTTO È QUELLA BUONA

Non stai utilizzando correttamente il metodo dei dati . Il codice corretto per aggiornare i dati è:

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

Quindi il tuo esempio sarebbe:

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

Usalo invece, se desideri cambiare l'attributo data-num dell'elemento nodo, non dell'oggetto dati :

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: ma dovresti usare l'oggetto data () praticamente in tutti i casi, ma non in tutti ...

Se volessimo recuperare o aggiornare questi attributi utilizzando JavaScript nativo esistente, possiamo farlo utilizzando i metodi getAttributee setAttributecome mostrato di seguito:

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>

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

Leggi questa documentazione per vanilla js o questa documentazione per jquery

Per quanto mi riguarda, usando Jquery lib 2.1.1 quanto segue NON ha funzionato come mi aspettavo:

Imposta il valore dell'attributo dei dati dell'elemento:

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

MA l'elemento stesso rimane senza l'attributo:

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

Avevo bisogno di aggiornare il DOM in modo da poter eseguire successivamente $ ('. My-class [data-num = "myValue"]') // la lunghezza corrente è 0

Quindi ho dovuto fare

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

Per ottenere l'aggiornamento del DOM:

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

Se l'attributo esiste o meno, $ .attr verrà sovrascritto.

Ho avuto un problema simile e alla fine ho dovuto impostare entrambi

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

e

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

E dopo questo

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

Spero che sia di aiuto.

Fondamentalmente, ci sono due modi per impostare / aggiornare il valore dell'attributo dei dati, dipende dalle tue necessità. La differenza è che, dove i dati vengono salvati,

Se lo usi .data()verrà salvato nella variabile locale chiamata data_user, e non è visibile al momento dell'ispezione dell'elemento, se usi.attr() sarà pubblicamente visibile.

Spiegazione molto più chiara su questo commento

Questa risposta è per coloro che cercano di cambiare semplicemente il valore di un attributo di dati

Il suggerimento non cambierà il valore del tuo data-attr Jquery correttamente come ha affermato @adeneo. Per qualche motivo, però, non vedo lui (o nessun altro) pubblicare il metodo corretto per coloro che cercano di aggiornare i propri dati-attr. La risposta che @Lucas Willems ha pubblicato potrebbe essere la risposta al problema che Brian Tompsett -, 莱恩 sta avendo, ma non è la risposta alla domanda che potrebbe portare altri utenti qui.

Risposta rapida per quanto riguarda la dichiarazione di richiesta originale

-Per aggiornare data-attr

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

Errori facili *: devono esserci "dati-" all'inizio dell'attributo di cui stai cercando di modificare il valore.

Ha avuto un problema simile, propongo questa soluzione anche se non è supportata in IE 10 e sotto.

Dato

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

Lo standard Javascript definisce una proprietà chiamata dataset per aggiornare data-example-update.

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

Nota: utilizzare la notazione in caso di cammello per accedere all'attributo dati corretto.

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

Ho avuto lo stesso problema del tag di dati html che non si aggiornava quando stavo usando jquery, ma la modifica del codice che fa il lavoro effettivo da jquery a javascript ha funzionato.

Prova a usarlo quando si fa clic sul pulsante: (nota che il codice principale è la funzione 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);

});