Wie man Datenattribute in HTML-Elementen setzt

Question

Ich habe ein div mit einem Attribut data-myval = "10" . Ich möchte seinen Wert aktualisieren; würde er sich nicht ändern, wenn ich div.data('myval',20) ? Benötige ich div.attr('data-myval','20') nur?

Komme ich zwischen HTML5 und jQuery durcheinander? Bitte beraten Sie mich. Danke!

EDIT: Aktualisiert div.data('myval')=20 a div.data('myval',20) aber der HTML-Code wird immer noch nicht aktualisiert.

Answer 1

Wenn Sie jQuery verwenden, benutzen Sie .data() :

div.data('myval', 20);

Sie können beliebige Daten speichern mit .data() verwenden, aber Sie sind auf Strings beschränkt, wenn Sie .attr() .

Answer 2

[jQuery] .data() vs .attr() vs .extend()

Die jQuery-Methode .data() aktualisiert ein internes Objekt von jQuery durch die Verwendung der Methode verwaltet, wenn ich richtig bin.

Wenn Sie Ihre Daten aktualisieren möchten data-attributes mit etwas Aufstrich, verwenden Sie --

$('body').attr({ 'data-test': 'text' });

-- sonst, $('body').attr('data-test', 'text'); wird gut funktionieren.

Eine andere Möglichkeit, dies zu erreichen, ist die Verwendung von --

$.extend( $('body')[0].dataset, { datum: true } );

-- die jede Änderung eines Attributs einschränkt auf HTMLElement.prototype.dataset , keine zusätzlichen HTMLElement.prototype.attributes .

Answer 3

Eine andere Möglichkeit, das data-Attribut zu setzen, ist die Verwendung der Datensatz Eigentum.

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

const el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

// set the data attribute
el.dataset.dateOfBirth = '1960-10-03'; 
// Result: el.dataset.dateOfBirth === 1960-10-03

delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true