У меня есть следующее поле в представлении MVC:
@Html.TextBoxFor(model => model.Course.Title, new { data_helptext = "Old Text" })</span>
В отдельном файле js я хочу установить для data-helptext
атрибута строковое значение. Вот мой код:
alert($(targetField).data("helptext"));
$(targetField).data("helptext", "Testing 123");
alert()
Вызов работает нормально, это показывает текст «Старый Текст» в диалоговом окне предупреждения. Однако вызов для установки data-helptext
атрибута на «Тестирование 123» не работает. «Старый текст» по-прежнему является текущим значением атрибута.
Я неправильно использую вызов data ()? Я поискал это в Интернете и не вижу, что делаю не так.
Вот HTML-разметка:
<input data-helptext="Old Text" id="Course_Title" name="Course.Title" type="text" value="" />
jquery
model-view-controller
attributes
custom-data-attribute
Джейсон Эванс
источник
источник
data-
атрибут HTML5 ?Ответы:
Это упоминается в
.data()
документацииЭто также было рассмотрено в статье Почему изменения в jQuery $ .fn.data () не обновляют соответствующие атрибуты html 5 data- *?
Демонстрация моего исходного ответа ниже, похоже, больше не работает.
Обновленный ответ
Опять же из
.data()
документацииИтак,
<div data-role="page"></div>
верно следующее$('div').data('role') === 'page'
Я
$('div').data('data-role')
почти уверен, что это работало в прошлом, но, похоже, сейчас это не так. Я создал лучшую витрину, которая ведет журнал в HTML вместо того, чтобы открывать консоль, и добавил дополнительный пример преобразования атрибутов данных с несколькими дефисами в camelCase .Обновленная демоверсия (25.07.2015)
Также см. Данные jQuery vs Attr?
HTML
JavaScript (jQuery 1.6.2+)
Старая демо
Оригинальный ответ
Для этого HTML:
и этот JavaScript (с jQuery 1.6.2)
Посмотреть демо
Использование Chrome DevTools консоли для проверки DOM, то
$('#foo').data('helptext', 'Testing 123');
не обновляет значение , как видно в консоли , но$('#foo').attr('data-helptext', 'Testing 123');
делает.источник
data('key', 'value')
Метод действительно обновляет значение в кэше JQuery , но по причинам производительности (я предполагаю , что мутации DOM) сам DOM не обновляется..attr('key','value')
независимо от того, сделали вы это.data('key', 'value')
или нет, верно? Мне это кажется избыточным, и мне сложно представить сценарий, в котором вы хотели бы писать в кэшированную DOM, но не в настоящую DOM. Может, я не понимаю кеш jQuery; Так будет ли посетитель видеть все, что.data()
изменяется на своем экране, или нет?У меня были серьезные проблемы с
Он не устанавливал
data-property
атрибут.Начал использовать jQuery
.attr()
:установить значение и
чтобы получить значение.
Теперь это просто работает!
источник
В принятом ответе @andyb есть небольшая ошибка. В дополнение к моему комментарию к его сообщению выше ...
Для этого HTML:
Вам нужно получить доступ к атрибуту следующим образом:
но метод данных вроде этого:
Приведенное выше исправление для метода .data () предотвратит "undefined", и значение данных будет обновлено (в то время как HTML не будет).
Смысл атрибута «данные» состоит в том, чтобы связать (или «связать») значение с элементом. Очень похоже на
onclick="alert('do_something')"
атрибут, который связывает действие с элементом ... текст бесполезен, вы просто хотите, чтобы действие работало, когда они щелкают элемент.Как только данные или действие привязаны к элементу, обычно * нет необходимости обновлять HTML, только данные или метод, поскольку это то, что будет использовать ваше приложение (JavaScript). Что касается производительности, я не понимаю, почему вы все равно захотите обновить HTML, никто не видит атрибут html (кроме Firebug или других консолей).
Один из способов подумать об этом: HTML (вместе с атрибутами) - это просто текст. Данные, функции, объекты и т. Д., Которые использует JavaScript, существуют в отдельной плоскости. Только когда JavaScript получает указание сделать это, он будет читать или обновлять текст HTML, но все данные и функции, которые вы создаете с помощью JavaScript, действуют полностью отдельно от текста / атрибутов HTML, которые вы видите в консоли Firebug (или другой).
* Обычно я делаю акцент на этом, потому что если у вас есть случай, когда вам нужно сохранить и экспортировать HTML (например, какой-то текстовый редактор с микроформатом / данными), где HTML будет загружаться свежим на другой странице, тогда, возможно, вам нужно обновить HTML слишком.
источник
data
Вattr('data-helptext'
решаюшее, где общепринятый ответ и те , с большим количеством голосов , которые не работают. +1Случилось то же самое со мной. Оказывается, что
дает вам объект, недоступный для записи. Я решил это, используя:
И с тех пор это
data
был стандартный JS-объект с возможностью записи.источник
$.extend...
, вы можете использоватьdata
как хотите:,data.name = 'Nico'; data.questionSolved = true;
иconsole.log(data)
будут отображать эти недавно добавленные свойстваПроцитирую цитату:
.data()
- Документация jQueryОбратите внимание, что это (откровенно странное ) ограничение распространяется только на использование
.data()
.Решение? использование
.attr
вместо этого.Конечно, некоторым из вас может быть неудобно не использовать специальный метод. Рассмотрим следующий сценарий:
Здравый смысл - зачем им так менять уже установленный атрибут? Только представьте, что
class
начало переименовано в группу иid
в идентификатор . Интернет сломается.И даже в этом случае сам Javascript может это исправить - и, конечно же, несмотря на печально известную несовместимость с HTML, REGEX (и множество подобных методов) может быстро переименовать ваши атрибуты в этот новый мифический «стандарт».
TL; DR
источник
Как уже упоминалось,
.data()
метод фактически не устанавливает значениеdata-
атрибута и не считывает обновленные значения, еслиdata-
атрибут изменяется.Мое решение заключалось в том, чтобы расширить jQuery
.realData()
методом, который фактически соответствует текущему значению атрибута:ПРИМЕЧАНИЕ: Конечно, вы можете просто использовать
.attr()
, но по моему опыту, большинство разработчиков (также как и я) совершают ошибку, рассматривая.attr()
и.data()
как взаимозаменяемые, и часто заменяют одно другим, не задумываясь. Это может работать большую часть времени, но это отличный способ внести ошибки, особенно при работе с любым типом динамической привязки данных. Таким образом, используя.realData()
, я могу более четко определить предполагаемое поведение.источник
Была такая же проблема. Поскольку вы все еще можете получать данные с помощью метода .data (), вам нужно только выяснить способ записи в элементы. Это вспомогательный метод, который я использую. Как говорят многие, вам придется использовать .attr. У меня он заменяет любой _ на - насколько я знаю, он это делает. Я не знаю никаких других персонажей, которые он заменяет ... однако я не исследовал это.
РЕДАКТИРОВАТЬ: 01.05.2017
Я обнаружил, что все еще были случаи, когда вы не могли получить правильные данные с помощью встроенных методов, поэтому сейчас я использую следующее:
источник