Как использовать атрибут data для передачи значений с помощью jQuery?

Я хотел бы узнать больше об использовании атрибутов data- * с HTML и его использовании в jQuery. Я просто пытаюсь получить атрибут data-attribute- name= "значение" с .data() и /.attr(), оба записываются как "undefined" со следующими способами ниже, Как использовать атрибут data для передачи значений с помощью jQuery?

HTML

<li class="als-item">
    <a data-loc-subject="test value">
        <img src="clock.png"/>
    </a>Beach
</li>

$( ".als-item" ).click(function(e) {
e.preventDefault();

var data = $('.als-item').data('data-loc-subject');
var attrmethod = $('.als-item').attr('data-loc-subject');
    console.log(data);
    console.log(attrmethod);
});

jsFiddle

Ответ 1

Вам не нужно префикс имени данных словом data.

$( ".als-item > a" ).click(function(e) {
    e.preventDefault();

    var data = $('.als-item').data('loc-subject');
    var attrmethod = $('.als-item').attr('data-loc-subject');
        console.log(data);
        console.log(attrmethod);
});

http://jsfiddle.net/thinkingmedia/c6kYT/

Разница между двумя

Вы можете жестко записать данные в DOM с использованием атрибутов данных. Например:

<a href="#" data-john="smith">Something</a>
console.log($("a").data("john"));
// will output "smith"

Это работает, потому что jQuery обрабатывает данные иначе, чем атрибуты. Он будет первым проверить, содержит ли элемент DOM атрибут с именем data-john, и если он возвращает это значение. Если он не содержит этого атрибута, он будет рассматривать внутренние данные прикрепленные к элементу DOM. Если эти данные существуют, он вернет это значение.

Когда вы устанавливаете данные с помощью jQuery, он не обновляет атрибуты элемента DOM. Он будет прикреплять данные к элементу DOM внутри. Поэтому $("a").data("house","on fire"); будет хранить строку "в огне" в элементе DOM под меткой "дом". Если вы используете инспектор DOM для просмотра HTML. Новый элемент, назначенный этому элементу data-house, не будет назначен.

Это отличается от методов jQuery.attr(). Которые непосредственно изменяют атрибуты элемента DOM.

EDIT: Следует отметить, что для доступа к атрибутам данных некоторого элемента HTML вы должны выбрать элемент через какой-то селектор (id, class и т.д.). Вы не можете передать "this" любому атрибуту метода в элементе и использовать этот аргумент для доступа к данным. Он будет создавать undefined.

HTML

<li class="als-item">
    <button onclick="somefunc1(this)" id="mybutton" 
        data-loc-subject="test value">My Button</button>
</li>

function somefunc1(button) {
  // this alert prints "undefined"
  alert($(this).data('loc-subject'));
  // this will print "test value"
  alert($('#mybutton').data('loc-subject'));
}

Plunker

Ответ 2

Префикс атрибута "data-" должен быть удален в вашем вызове .data(), поэтому предположим:

<span class="als-item" data-loc-subject="foo">ohai</span>

он будет извлечен через:

console.log($(".als-item").data("loc-subject"));

Ответ 3

<div id="someID" attr1="this is attr 1" data-attr-1="data attribute 1"></div>

Вы можете найти любой атрибут элемента, используя

$("#someID").attr('attr1') [or] $("#someID").attr('data-attr-1');

для таргетинга на основе, если элемент имеет атрибут, вы можете сделать:

$("[attr1]") or $("[attr1='this is attr 1']"), который вернет элемент (а не значение атрибута)