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