Jquery не может получить значение атрибута данных

Я пытаюсь установить переменную в jQuery. Значение должно быть установлено в событии нажатия кнопки. Событие onclick срабатывает, но переменная x10Device остается undefined.

Я на jquery 1.7.1.

JQuery

 $x10Device = $(this).data("X10");

HTML:

<button class="toggleStatus" data-X10="C5">

Я не вижу, что случилось.

Ответ 1

jQuery data() метод предоставит вам доступ к атрибутам data-*, НО, он сжимает случай имени атрибута. Вы можете использовать это:

$('#myButton').data("x10") // note the lower case

Или вы можете использовать метод attr(), который сохраняет ваш случай:

$('#myButton').attr("data-X10")

Попробуйте использовать оба метода здесь: http://jsfiddle.net/q5rbL/

Помните, что эти подходы не полностью эквивалентны. Если вы измените атрибут data-* элемента, вы должны использовать attr(). data() будет сначала считывать значение, а затем продолжать возвращать кешированную копию, тогда как attr() будет перечитывать атрибут каждый раз.

Обратите внимание, что jQuery также преобразует дефисы в имя атрибута в случай верблюда (источник - т.е. data-some-data == $(ele).data('someData')). Оба этих преобразования соответствуют спецификации HTML, что указывает на то, что атрибуты пользовательских данных не должны содержать заглавных букв, и что дефисы будут привязаны к верблюду в свойстве dataset (source). Метод jQuery data просто имитирует/соответствует этому стандартному поведению.

Documentation

data - http://api.jquery.com/data/
attr - http://api.jquery.com/attr/
HTML-семантика и структура, атрибуты пользовательских данных - http://www.w3.org/html/wg/drafts/html/master/dom.html#custom-data-attribute

Ответ 2

Iyap. Это работает Учитывать регистр в имени данных Данные-x10

var variable = $('#myButton').data("x10");//мы получаем значение атрибута пользовательских данных

Ответ 3

Использовать простые методы javascript

$x10Device = this.dataset("x10");

Ответ 4

Изменение обсадной трубы ко всем черным шкафам работало для меня.

Ответ 5

Убедитесь, что событие, связанное с нажатием кнопки, не распространяется на дочерние элементы как тег значка (<i class="fa...) внутри кнопки, например, поэтому это распространение может заставить вас пропустить кнопку $(this).attr('data-X10') и нажать значок значка.

<button data-x10="C5">
    <i class="fa fa-check"></i> Text
</button>

$('button.toggleStatus').on('click', function (event) {
    event.preventDefault();
    event.stopPropagation();
    $(event.currentTarget).attr('data-X10');
});

Ответ 6

Вы можете изменить атрибуты селектора и данных, как вы пожелаете!

 <select id="selectVehicle">
       <option value="1" data-year="2011">Mazda</option>
       <option value="2" data-year="2015">Honda</option>
       <option value="3" data-year="2008">Mercedes</option>
       <option value="4" data-year="2005">Toyota</option>
  </select>

$("#selectVehicle").change(function () {
     alert($(this).find(':selected').data("year"));
});

Вот рабочий пример: https://jsfiddle.net/ed5axgvk/1/