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

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

Я нахожусь на jquery 1.7.1.

jQuery:

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

HTML:

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

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

6 58
jquery html5

6 ответов:

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

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

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

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

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

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

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

документация

124

Iyap . Своя работа Чувствительный к регистру в имени данных данные-х10

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

3

используйте простые методы javascript

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

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

1

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

 <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/

1

убедитесь, что событие, связанное с нажатием кнопки, не распространяется на дочерние элементы в качестве тега значка (<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');
});
1