Der Datenattributwert kann nicht aktualisiert werden

Zwar gibt es einige Beispiele dazu auf der web, es nicht richtig zu funktionieren scheint. Ich kann nicht herausfinden, das problem.

Habe ich diese einfache html -

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

Jedes mal, wenn ich auf den link "Daten ändern Wert" möchte ich die Daten aktualisieren, die dem Wert der Daten-num.
Zum Beispiel brauche ich es 1,2,3,4,... (plus 1 jedes mal, wenn ich auf den link klicken)

was ich habe, ist

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

Ändert sich der Wert einer Zeit von 0 zu 1 zu jeder Zeit. Ich kann es nicht inkrementell. Irgendwelche Vorschläge, was ich falsch mache?

InformationsquelleAutor der Frage dev | 2013-07-20

42

EDIT: die Antwort einfach unten die gute one.

Dass Sie nicht mit der Daten-Methode richtig. Der richtige code um die Daten zu aktualisieren ist:
```
$('#foo').data('num', num); 
```
Also dein Beispiel wäre:
```
var num = $('#foo').data("num") + 1;       
console.log(num)       
$('#foo').data('num', num); 
console.log(num)
```
InformationsquelleAutor der Antwort Lucas Willems

Verwenden, statt, wenn Sie möchten, ändern Sie das Attribut data-num-Knoten-element, nicht der Daten-Objekt:

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 man sollte die data () - Objekt in praktisch allen Fällen, aber nicht alle...

InformationsquelleAutor der Antwort A. Wolff

Wenn wir wollten, abzurufen oder zu aktualisieren, diese Attribute über die vorhandene, native JavaScriptdann können wir das so machen mit der getAttribute und setAttribute Methoden wie unten gezeigt:

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

InformationsquelleAutor der Antwort Lalit Kumar

10

Für mich, mit Jquery lib 2.1.1 das folgende funktioniert NICHT so wie ich erwartet hatte:

Set-element Daten-Attribut-Wert:
```
$('.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>
```
Brauchte ich das DOM aktualisiert, so konnte ich später tun
$('.meine-Klasse[data-num="myValue"]') //aktuelle Länge ist 0

So, ich hatte zu tun,
```
$('.my-class').attr('data-num', 'myValue');
```
Um die DOM-update:
```
<div class="my-class" data-num="myValue"></div>
```
Ob das Attribut vorhanden ist oder nicht $.attr überschreiben.

InformationsquelleAutor der Antwort Brian Ogden
3

Hatte ähnliches problem und am Ende hatte ich beide
```
obj.attr('data-myvar','myval')
```
und
```
obj.data('myvar','myval')
```
Und nach dieser
```
obj.data('myvar') == obj.attr('data-myvar')
```
Hoffe, das hilft.

InformationsquelleAutor der Antwort Kristian Kurgjärv
0

Diese Antwort ist für diejenigen, die zu ändern Sie einfach den Wert des data-Attributs

Dem vorgeschlagen wird, nicht ändern Sie den Wert Ihres Jquery data-attr korrekt als @adeneo angegeben hat. Aus irgendeinem Grund, obwohl, ich bin nicht zu sehen, ihn (oder andere) post die richtige Methode für diejenigen, die Ihre Daten aktualisieren-attr. Die Antwort, die @Lucas Willems gepostet hat, kann die Antwort auf ein problem Brian Tompsett - 汤莱恩 habe, aber es ist nicht die Antwort auf die Anfrage, vielleicht bringen andere user hier.

Schnelle Antwort in Bezug auf die ursprüngliche Anfrage-Anweisung

-Daten zu aktualisieren-attr
```
$('#ElementId').attr('data-attributeTitle',newAttributeValue);
```
Einfach Fehler* - es muss "Daten" am Anfang des Attributs, das Sie suchen, um den Wert zu ändern.

InformationsquelleAutor der Antwort MattOlivos
0

Hatte ein ähnliches problem, ich schlage vor, diese Lösung, obwohl, ist nicht unterstützt in IE 10 und unter.

Gegeben
```
<div id='example' data-example-update = '1' ></div>
```
Den Javascript-standard definiert eine Eigenschaft namens " dataset zum aktualisieren von Daten-Beispiel-update.
```
document.getElementById('example').dataset.exampleUpdate = 2;
```
Hinweis: verwenden camel-case-notation, um auf die korrekte Daten-Attribut.

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

InformationsquelleAutor der Antwort Giovanni Romio

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.