Использование атрибутов данных с jQuery

Question

У меня есть эта кнопка:

<button type="button" class="themeChanger" data-themeValue="grid" value="Grid">
   <img src="templateImages/Icon_200.png" />                
</button>

И этот jQuery:

$(".themeChanger").click(function () { 
    alert($(this).attr("data-themeValue")); 
    alert($(this).data("themeValue")); 
});

По некоторым причинам первое предупреждение показывает «сетку», как и должно быть, но второе показывает неопределенное.Что-то глупое, что мне не хватает?

Answer 1

Я думаю, что данные будут выглядеть в нижнем регистре: alert($(this).data("themevalue")) //grid

или, если вы хотите использовать themeValue, вам нужно использовать:

edit:

Я был неправ,он не имеет ничего общего со строчными буквами, вы можете использовать themeValue, если у вас есть атрибут: data-theme-value, тогда вы вызываете его с помощью $ (element) .data ("themeValue")

<button class="themeChanger" data-themeValue="Theme1" data-theme-value="Theme2"></button>

$(".themeChanger").click(function() {
    var el = $(this);

    alert($(this).data("themeValue")); //Theme2
    alert($(this).data("themevalue")); //Theme1
});

Answer 2

Как отмечено в этой статье Learning jQuery , атрибуты HTML5 data-* обрабатываются браузером-> JS-преобразованием так же, как обрабатываются имена CSS - то есть:

1. ведущий data- удален (шаг, который не требуется при сравнении имен CSS, который я нарисовал выше)
   • data-specialInfo становится specialInfo
   • data-more-specialInfo становится more-specialInfo
2. оставшееся имя атрибута разделено на -
   • 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").

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

Answer 3

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

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

jquery автоматически конвертирует .data('some-value') в data('someValue')

Обратите внимание, что оба оповещения возвращают grid

Answer 4

Я думаю, что это верблюжий регистр переносимых слов в реализации тега данных, который здесь надо понимать

Попробуйте это jsfiddle - http://jsfiddle.net/FloydPink/fb6Y6/

<button type="button" class="themeChanger" data-theme-value="grid" value="Grid">
   data-theme-value                
</button>

<button type="button" class="themeChanger" data-themeValue="grid" value="Grid">
   data-themeValue
</button>

$(".themeChanger").click(function () {
    alert($(this).attr("data-themeValue"));
    alert($(this).data("themeValue"));
});