JavaScript jQuery falsche Werte übergeben?

[Schumiel]

Hallo,

und zwar möchte ich, dass ich nach Klicks auf einem Button die "data-test" ändert. Beim erstemal klicken funktioniert auch alles super. Es wird um 1 erhöht. Beim nächsten Klick wird wieder mit dem Wert begonnen, dass fest vergeben wurde, obwohl in den DEV-Tools des Browsers der neue Wert zugewiesen wurde. Das bekomme ich mit console.log heraus.

$( document ).ready(function() {
    $('.items').on('click', function(){
        var test = $(this).data('test') + 1;
        $(this).attr('data-test', test);
    });
});

Wo ist mein Fehler?

 

[AndrewPoison]

Probiere die Zuweisung in der Zeile 4 mal über

$(this).data('test', test);

Ich denke mal, hier werden Properties und Attribute verwechselt.

 

[Schumiel]

Gleiches verhalten.

 

[System01]

$( document ).ready(function() {
    console.log("as");
    $('.items').on('click', function(){
        var test = $(this).data('test') + 1;
        $(this).data('test', test);
        console.log(test);
    });
});

 

[coolmodi]

Und genau deshalb ist jQuery oft scheiße, man lernt gar nicht was man da überhaupt macht, und i.d.R., wie auch hier, braucht man es eigentlich überhaupt nicht.

Das hier liest den Wert aus dem Attribut UND ändert das Attribut.

$( document ).ready(function() {
    $('.items').on('click', function(){
        var test = parseInt($(this).attr('data-test')) + 1; // Ohne parseInt hast du sonst "1","11","111" etc.
        $(this).attr('data-test', test);
    });
});

Siehe elem.getAttribute(attr) und elem.setAttribute(attr, wert) in normalem JS.

Das hier liest den Wert aber ändert nicht das Attribut, sondern nur intern den Wert!

$( document ).ready(function() {
    $('.items').on('click', function(){
        var test = $(this).data('test') + 1; //jQuery wandelt wohl schon intern in number um bei .data()
        $(this).data('test', test);
        console.log(test); // Output 1,2,3,4 etc.
    });
});

Das ist eine Eigenheit von .data() in jQuery, warum auch immer, normales JS macht das nicht und ändert einfach das Attribut:

$( document ).ready(function() {
    $('.items').on('click', function(){
        // elem.dataset ist ein liste aller "data-" attribute
        var test = parseInt(this.dataset.test) + 1;
        this.dataset.test = test;
    });
});

 

[John Reese]

Das ist keine Eigenheit, sondern ein Feature:

https://api.jquery.com/data/

Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr.

Der Grund dafür liegt darin, dass man so beliebige Objekte speichern kann. Über den DOM würde das m.E. nach nicht funktionieren, da ich als Attribute ja nur Strings hinterlegen kann.

Ist zwar schon ewig her, dass ich jQuery benutzt habe, aber daran konnte ich mich noch erinnern

 

[coolmodi]

@John Reese Oh ja gut das kann sein, ist halt ohne das zu Wissen etwas komisch, da data Attribute ein HTML5 Standard sind. Denke mal .data() stammt aus einer Zeit lange davor.