Datenattributwert kann nicht aktualisiert werden

Obwohl es im Web einige Beispiele dafür gibt, scheint es nicht richtig zu funktionieren. Ich kann das Problem nicht herausfinden.

Ich habe dieses einfache HTML

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

Jedes Mal, wenn ich auf den Link "Datenwert ändern" klicke, möchte ich den Datenwert von data-num aktualisieren. Zum Beispiel muss es 1,2,3,4, ... sein (plus 1 jedes Mal, wenn ich auf den Link klicke)

was ich habe ist

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

Der Wert ändert sich jedes Mal einmal von 0 auf 1. Ich kann es nicht inkrementell machen. Irgendwelche Vorschläge, was ich falsch mache?

DIE ANTWORT UNTEN IST DIE GUTE

Sie verwenden die Datenmethode nicht richtig. Der richtige Code zum Aktualisieren von Daten lautet:

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

Ihr Beispiel wäre also:

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

Verwenden Sie dies stattdessen, wenn Sie das Attribut data-num des Knotenelements und nicht des Datenobjekts ändern möchten :

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: Aber Sie sollten das data () - Objekt in praktisch allen Fällen verwenden, aber nicht in allen ...

Wenn wir diese Attribute mit vorhandenen, nativen abzurufen oder aktualisieren wollten JavaScript , dann können wir tun , um die Verwendung getAttributeund setAttributeMethoden wie unten dargestellt:

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>

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

Lesen Sie diese Dokumentation für Vanilla Js oder diese Dokumentation für JQuery

Für mich hat die Verwendung von Jquery lib 2.1.1 NICHT wie erwartet funktioniert:

Festlegen des Attributwerts für Elementdaten:

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

ABER das Element selbst bleibt ohne das Attribut:

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

Ich musste das DOM aktualisieren, damit ich später $ ('. My-class [data-num = "myValue"]') // aktuelle Länge 0 machen konnte

Also musste ich tun

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

So aktualisieren Sie das DOM:

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

Ob das Attribut vorhanden ist oder nicht, $ .attr wird überschrieben.

Hatte ein ähnliches Problem und am Ende musste ich beide einstellen

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

und

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

Und danach

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

Hoffe das hilft.

Grundsätzlich gibt es zwei Möglichkeiten, den Datenattributwert festzulegen / zu aktualisieren, abhängig von Ihren Anforderungen. Der Unterschied ist nur, wo die Daten gespeichert werden,

Wenn Sie es verwenden .data(), wird es in einer lokalen Variablen namens aufgerufen data_userund ist bei der Elementprüfung nicht sichtbar. Wenn Sie es verwenden, ist .attr()es öffentlich sichtbar.

Viel klarere Erklärung zu diesem Kommentar

Diese Antwort ist für diejenigen gedacht, die nur den Wert eines Datenattributs ändern möchten

Der vorgeschlagene Wert ändert den Wert Ihres Jquery-Datenattr nicht korrekt, wie @adeneo angegeben hat. Aus irgendeinem Grund sehe ich jedoch nicht, dass er (oder andere) die richtige Methode für diejenigen veröffentlicht, die ihre Datenattr aktualisieren möchten. Die Antwort, die @Lucas Willems gepostet hat, ist möglicherweise die Antwort auf das Problem, das Brian Tompsett - 汤 莱恩 hat, aber es ist nicht die Antwort auf die Anfrage, die andere Benutzer hierher bringt.

Schnelle Antwort in Bezug auf die ursprüngliche Anfrageerklärung

-Um Datenattr zu aktualisieren

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

Einfache Fehler * - Am Anfang Ihres Attributs muss "data-" stehen, dessen Wert Sie ändern möchten.

Hatte ein ähnliches Problem, schlage ich vor, dass diese Lösung in IE 10 und darunter nicht unterstützt wird.

Gegeben

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

Der Javascript-Standard definiert eine Eigenschaft namens Dataset zum Aktualisieren der Datenbeispielaktualisierung.

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

Hinweis: Verwenden Sie die Kamelschreibweise, um auf das richtige Datenattribut zuzugreifen.

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

Ich hatte das gleiche Problem, dass das HTML-Daten-Tag nicht aktualisiert wurde, als ich jquery verwendete. Aber das Ändern des Codes, der die eigentliche Arbeit erledigt, von jquery zu javascript funktionierte.

Versuchen Sie dies, wenn Sie auf die Schaltfläche klicken : (Beachten Sie, dass der Hauptcode die Funktion Javascripts setAttribute () ist.)

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

});