Использование атрибутов данных с помощью 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 – это:

  1. лидирующие данные удаляются (шаг, не необходимый в сравнении имен CSS, который я нарисовал выше)
    • data-specialInfo становится specialInfo
    • data-more-specialInfo становится more-specialInfo
  2. оставшееся имя attr разделяется -
    • specialInfo становится [ specialInfo ]
    • more-specialInfo становится [ more, specialInfo ]
  3. первая из полученных разделенных частей отбрасывается на все нижние регистры
    • [ specialInfo ] становится [ specialinfo ]
    • [ more, specialInfo ] становится [ more, specialInfo ] (без изменений, поскольку первая часть была уже ниже)
  4. остальные результирующие разделенные части отбрасываются в нижний регистр, но их первая буква выполнена в верхнем регистре
    • [ specialinfo ] становится [ specialinfo ] (без изменений, потому что не было других частей)
    • [ more, specialInfo ] становится [ more, Specialinfo ]
  5. Теперь модифицированные в данный момент части возвращаются в пустую строку
    • [ specialinfo ] становится specialinfo
    • [ more, Specialinfo ] становится moreSpecialinfo

В этом случае атрибут data-themeValue доступен через $(this).data("themevalue") . Атрибут data-theme-value будет доступен через $(this).data("themeValue") .

Это ужасно запутанно, если вы не признаете используемый механизм.

Проблема в верблюжьем корпусе. Для ясности я придерживаюсь формата data-theme-value для ваших атрибутов.

http://jsfiddle.net/NkHEx/2/

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")); }); 
  • Использовать success () или complete () в вызове AJAX
  • Передавать всю форму в виде данных в функции jQuery Ajax
  • Плагин проверки jQuery + equalTo не работает
  • Получить значение div-содержимого с помощью jquery
  • jQuery выбрать все, кроме первого
  • Обновить (перезагрузить) страницу один раз с помощью jQuery?
  • Как реализовать диалог «подтверждения» в диалоговом окне JQuery UI?
  • Используйте раскрывающееся меню Bootstrap 3 в качестве контекстного меню
  • Получение фактической ширины элемента с плавающей запятой
  • Вызов ASP.NET PageMethod / WebMethod с помощью jQuery - возвращает всю страницу
  • Код работает в jsFiddle, но не в браузере
  • Давайте будем гением компьютера.