Imansible aggiornare il valore di attributo dei dati

Sebbene sul web ci siano alcuni esempi, sembra che non funzioni correttamente. Non riesco a capire il problema.

Ho questo semplice HTML

change data value

Ogni volta che clicco sul link “modifica il valore dei dati”, voglio aggiornare il valore dei dati di data-num. Ad esempio ho bisogno di essere 1,2,3,4, … (più 1 ogni volta che clicco il link)

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 facendo male?

EDIT: la risposta appena sotto è quella giusta.

Non stai utilizzando il metodo dati correttamente. 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 modificare i dati attributo-num dell’elemento nodo, non dell’object 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’object data () praticamente in tutti i casi, ma non tutti …

Se volessimo recuperare o aggiornare questi attributi utilizzando JavaScript nativo esistente, possiamo farlo utilizzando i metodi getAttribute e setAttribute come mostrato di seguito:

JavaScript

  

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 il seguente 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:

 

Avevo bisogno di aggiornare il DOM in modo da poter fare in seguito $ (‘. My-class [data-num = “myValue”]’) // la lunghezza attuale è 0

Quindi dovevo farlo

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

Per ottenere il DOM da aggiornare:

 

Se l’attributo esiste o no, $ .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 questo ti aiuti.

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

Il suggerimento non cambierà il valore dei tuoi dati Jquery-attr correttamente come ha affermato @adeneo. Per qualche ragione però, non sto vedendo lui (o altri) postare il metodo corretto per coloro che cercano di aggiornare i loro dati-attr. La risposta che @Lucas Willems ha pubblicato potrebbe essere la risposta al problema di Brian Tompsett – 汤 莱恩 sta avendo, ma non è la risposta alla domanda che potrebbe portare altri utenti qui.

Risposta rapida in merito alla dichiarazione di richiesta originale

-Per aggiornare i dati-attr

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

Errori facili * – ci devono essere “dati” all’inizio del tuo attributo che stai cercando di cambiare il valore di.

Ho avuto un problema simile, propongo questa soluzione sebbene non sia supportata in IE 10 e sotto.

Dato

 

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

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

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

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