Использование атрибутов данных с помощью jQuery
У меня есть эта кнопка:
И этот jQuery:
$(".themeChanger").click(function () { alert($(this).attr("data-themeValue")); alert($(this).data("themeValue")); });
По какой-то причине первое предупреждение показывает «сетку», как должно, но второе показывает undefined. Есть что-то глупое, которого я пропускаю?
- Может ли кто-нибудь объяснить, что такое JSONP, в условиях неспециалиста?
- Bottle Py: включение CORS для запросов JQuery AJAX
- Настройка типа содержимого запросов, выполняемых jQuery jqGrid
- Выбрать элемент по точному соответствию его содержимому
- Выделите все флажки с помощью jQuery
- Получение полноэкранного режима в моем браузере с помощью jquery
- Почему я должен использовать CDN от Google для jQuery?
- Проблемы с API-интерфейсами API Google Maps v3 + jQuery
- отключить гиперссылку с помощью jQuery
- Почему изменения в jQuery $ .fn.data () не изменяют соответствующие атрибуты html 5 data- *?
- Событие jQuery click не работает в мобильных браузерах
- Правильный способ использования AJAX Post в jquery для передачи модели из строго типизированного представления MVC3
- JQuery ajax вызов httpget webmethod (c #) не работает
Я думаю, что данные будут смотреть на alert($(this).data("themevalue")) //grid : alert($(this).data("themevalue")) //grid
или если вы хотите использовать themeValue, вам необходимо использовать:
редактировать:
Я был неправ, он не имеет ничего общего с нижними строками, вы можете использовать themeValue, если у вас есть атрибут: data-theme-value тогда вы вызываете его с помощью $ (element) .data (“themeValue”)
$(".themeChanger").click(function() { var el = $(this); alert($(this).data("themeValue")); //Theme2 alert($(this).data("themevalue")); //Theme1 });
Как отмечено в этой статье Learning jQuery , атрибуты data-* HTML5 обрабатываются с помощью преобразования браузера -> JS так же, как обрабатываются имена CSS – это:
- лидирующие данные удаляются (шаг, не необходимый в сравнении имен CSS, который я нарисовал выше)
-
data-specialInfoстановитсяspecialInfo -
data-more-specialInfoстановитсяmore-specialInfo
-
- оставшееся имя attr разделяется
--
specialInfoстановится[ specialInfo ] -
more-specialInfoстановится[ more, specialInfo ]
-
- первая из полученных разделенных частей отбрасывается на все нижние регистры
-
[ specialInfo ]становится[ specialinfo ] -
[ more, specialInfo ]становится[ more, specialInfo ](без изменений, поскольку первая часть была уже ниже)
-
- остальные результирующие разделенные части отбрасываются в нижний регистр, но их первая буква выполнена в верхнем регистре
-
[ specialinfo ]становится[ specialinfo ](без изменений, потому что не было других частей) -
[ more, specialInfo ]становится[ more, Specialinfo ]
-
- Теперь модифицированные в данный момент части возвращаются в пустую строку
-
[ specialinfo ]становитсяspecialinfo -
[ more, Specialinfo ]становитсяmoreSpecialinfo
-
В этом случае атрибут data-themeValue доступен через $(this).data("themevalue") . Атрибут data-theme-value будет доступен через $(this).data("themeValue") .
Это ужасно запутанно, если вы не признаете используемый механизм.
Проблема в верблюжьем корпусе. Для ясности я придерживаюсь формата data-theme-value для ваших атрибутов.
jquery автоматически преобразует .data('some-value') в data('someValue')
Обратите внимание, что как обратные вызовы возвращают grid
Я думаю, что это верблюжьей оболочкой переносимых слов в реализации тега данных, которая есть здесь
Попробуйте этот jsfiddle – http://jsfiddle.net/FloydPink/fb6Y6/
$(".themeChanger").click(function () { alert($(this).attr("data-themeValue")); alert($(this).data("themeValue")); });