Mam div z atrybutem data-myval = "10"
. Chcę zaktualizować jego wartość; czy to się nie zmieni, jeśli użyję div.data('myval',20)
? Czy muszę używać div.attr('data-myval','20')
tylko?
Czy mylę się między HTML5 a jQuery? Proszę doradź. Dzięki!
EDYCJA: Zaktualizowano div.data('myval')=20
do div.data('myval',20)
, ale HTML wciąż się nie aktualizuje.
jquery
html
custom-data-attribute
Pulkit Mittal
źródło
źródło
div
? Obiekt lub element jQuery?div.data('myval')=20
nie działałoby przechowywać wartości tylko dlatego, że składnia jest niepoprawna - zobacz odpowiedzi na poprawną składnię. Należy jednak pamiętać, że.data()
tak naprawdę nie aktualizuje atrybutu elementu , ale przechowuje dane w innym miejscu.Odpowiedzi:
HTML
JS
Próbny
Odniesienie
Z referencji:
Należy zauważyć, że jQuery's
data()
nie zmieniadata
atrybutu w HTML.Jeśli więc musisz zmienić
data
atrybut w HTML, powinieneś użyć.attr()
zamiast tego.HTML
JS:
Zobacz to demo
źródło
data()
naget
iset
HTML 5 danych atrybutów.[data-myval="10"]{ color: red; }
, która stylizuje tag zgodnie z wartością atrybutu danych.Możesz także użyć następującej
attr
rzeczy;HTML
Scenariusz
LUB
źródło
Należy pamiętać, że jQuery
.data()
nie jest aktualizowany po zmianiedata-
atrybutów html5 za pomocą javascript.Jeśli używasz jQuery
.data()
do ustawianiadata-
atrybutów w elementach HTML, lepiej użyj jQuery.data()
do ich odczytania. W przeciwnym razie mogą wystąpić niespójności, jeśli dynamicznie aktualizujesz atrybuty. Na przykład, patrzsetAttribute()
,dataset()
,attr()
poniżej. Zmień wartość, naciśnij przycisk kilka razy i zobacz konsolę.Pokaż fragment kodu
źródło
Waniliowe rozwiązanie Javascript
HTML
JavaScript:
Korzystanie z
getAttribute()
właściwości DOMKorzystanie z
dataset
właściwości JavaScriptźródło
Jeśli używasz jQuery, użyj
.data()
:Możesz przechowywać dowolne dane
.data()
, ale podczas korzystania jesteś ograniczony do samych łańcuchów.attr()
.źródło
.data()
metoda nie aktualizujedata-
atrybutów - to znaczy, że przechowywane przez nią dane nie kończą się atrybutem (dlatego może przechowywać wartości nie łańcuchowe), nawet jeśli może pobrać wartość zdata-
atrybutu. Chociaż podejrzewam, że OP tak naprawdę nie musi ustawiać atrybutów, nawet jeśli o to właśnie pytano..attr()
do pobrania atrybutu). Po prostu pomyślałem, że warto na to zwrócić uwagę, biorąc pod uwagę, że OP wyraźnie (choć może mylnie) zapytał o aktualizację atrybutów..attr()
jeśli tak naprawdę nie aktualizujesz „html”, aktualizujesz DOM. Gdy poprosisz przeglądarkę o podanie „html” (czy to przez.html()
DOMelement.innerHTML
), przeglądarka efektywnie go regeneruje na podstawie stanu DOM w danym momencie. Raczej.[jQuery] .data () vs .attr () vs .extend ()
Metoda jQuery
.data()
aktualizuje wewnętrzny obiekt zarządzany przez jQuery za pomocą metody, jeśli mam rację.Jeśli chcesz zaktualizować swój
data-attributes
spread, użyj -- w przeciwnym razie
$('body').attr('data-test', 'text');
będzie dobrze działać.Innym sposobem na osiągnięcie tego jest użycie -
- która ogranicza wszelkie zmiany atrybutów do
HTMLElement.prototype.dataset
, a nie żadnych dodatkowychHTMLElement.prototype.attributes
.źródło
Innym sposobem ustawienia atrybutu danych jest użycie właściwości zestawu danych .
źródło
Prostą opcją może być synchronizacja jQuery i DOM
źródło