Использование атрибутов данных с помощью jQuery
У меня есть эта кнопка:
И этот jQuery:
$(".themeChanger").click(function () { alert($(this).attr("data-themeValue")); alert($(this).data("themeValue")); });
По какой-то причине первое предупреждение показывает «сетку», как должно, но второе показывает undefined. Есть что-то глупое, которого я пропускаю?
Я думаю, что данные будут смотреть на 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")); });