Использование атрибутов данных с помощью 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")); }); 
  • Выбор текста в фокусе с использованием jQuery, не работающего в Safari и Chrome
  • Как открыть Modal в JSF 2 с помощью JQuery
  • дождитесь ответа на вызов jquery ajax от вызывающей функции
  • Как фильтровать возвращаемые данные из jQuery.ajax ()?
  • Функция ответа jQuery .get?
  • Почему после выхода из системы кнопка «Назад» на странице отображает содержимое предыдущей страницы?
  • Есть ли способ предотвратить совпадение событий в jQuery FullCalendar?
  • Использование jQuery для построения строк таблицы из ответа Ajax (Json)
  • Как реализовать иерархический многоуровневый datatable в javaScript?
  • Плагин загрузки файла jQuery: Можно ли сохранить структуру загруженных папок?
  • Перенаправление на Ajax Jquery Call
  • Давайте будем гением компьютера.