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

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

<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")); 
});

По какой-то причине первое предупреждение показывает "сетку", как должно, но второе показывает undefined. Есть что-то глупое, которого я пропускаю?

Ответы

Ответ 1

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

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

изменить:

Я ошибался, он не имеет ничего общего с нижними строками, вы можете использовать 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
});

Ответ 2

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

  • удаляется ведущий data- (шаг, не необходимый в сравнении имен 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").

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

Ответ 3

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

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

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

Обратите внимание, что оба предупреждения вызываются grid

Ответ 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"));
});