У меня есть div с атрибутом data-myval = "10"
. Я хочу обновить его значение; не изменится ли я, если я буду использовать div.data('myval',20)
? Нужно ли использовать div.attr('data-myval','20')
только?
Я запутался между HTML5 и jQuery? Пожалуйста, порекомендуйте. Спасибо!
РЕДАКТИРОВАТЬ: Обновлено div.data('myval')=20
до div.data('myval',20)
, но по-прежнему HTML не обновляется.
jquery
html
custom-data-attribute
Пулькит Миттал
источник
источник
div
? Объект или элемент jQuery?div.data('myval')=20
не будет работать, чтобы сохранить значение только потому, что синтаксис неправильный - см. ответы для правильного синтаксиса. Но обратите внимание, что на.data()
самом деле не обновляет атрибут элемента , он хранит данные в другом месте.Ответы:
HTML
JS
демонстрация
Ссылка
Из ссылки:
Следует отметить, что JQuery
data()
не меняетdata
атрибут в HTML.Итак, если вам нужно изменить
data
атрибут в HTML, вы должны использовать.attr()
вместо этого.HTML
JS:
Посмотреть эту демонстрацию
источник
data()
toget
иset
HTML-5.[data-myval="10"]{ color: red; }
, он будет стилизовать тег в соответствии со значением атрибута данных.Вы также можете использовать следующую
attr
вещь;HTML
скрипт
ИЛИ
источник
Обратите внимание, что jQuery
.data()
не обновляется при изменении html5.data-
атрибутов с помощью javascript.Если вы используете jQuery
.data()
для установкиdata-
атрибутов в элементах HTML, вам лучше использовать jQuery.data()
для их чтения. В противном случае могут возникнуть несоответствия, если вы обновите атрибуты динамически. Например, смsetAttribute()
,dataset()
,attr()
ниже. Измените значение, нажмите кнопку несколько раз и увидите консоль.Показать фрагмент кода
источник
Ванильное решение Javascript
HTML
JavaScript:
Использование
getAttribute()
свойства DOMИспользование
dataset
свойства JavaScriptисточник
Если вы используете jQuery, используйте
.data()
:Вы можете хранить произвольные данные с помощью
.data()
, но при использовании вы ограничены только строками.attr()
.источник
.data()
метод не обновляетdata-
атрибуты - то есть данные, которые он хранит, не попадают в атрибут (поэтому он может хранить не строковые значения), даже если он может извлечь значение изdata-
атрибута. Хотя я подозреваю, что OP на самом деле не нужно устанавливать атрибуты, хотя это то, что задал вопрос..attr()
для получения атрибута). Я просто подумал, что на это стоит обратить внимание, учитывая, что ОП явно (если возможно, по ошибке) спросил об обновлении атрибутов..attr()
если вы не обновляете «HTML», вы обновляете DOM. Когда вы просите браузер предоставить вам «html» (.html()
или с помощью DOMelement.innerHTML
), браузер эффективно восстанавливает его для вас в зависимости от состояния DOM на тот момент. Вроде, как бы, что-то вроде.[jQuery] .data () против .attr () против .extend ()
Метод jQuery
.data()
обновляет внутренний объект, управляемый jQuery, с помощью метода, если я прав.Если вы хотите обновить свой
data-attributes
с некоторым распространением, используйте -- иначе все
$('body').attr('data-test', 'text');
будет работать нормально.Еще один способ сделать это -
- который ограничивает любое изменение атрибута
HTMLElement.prototype.dataset
, а не любое дополнительноеHTMLElement.prototype.attributes
.источник
Другой способ установить атрибут data - использовать свойство набора данных .
источник
Чтобы синхронизировать JQuery и DOM, можно использовать простой вариант:
источник