jQuery .click (): получить атрибут из DIV с тем же классом

Question

У меня проблема с событием клика; вот код:

JQuery:

$(document).ready(function() {
    $('.myClass').click(function() {
        alert($(.myClass).attr("iditem"));
    });
});

HTML:

<div class="myClass" iditem="1">
    1 
</div>
<div class="myClass" iditem="2">
    2
</div>

Два DIV с одним и тем же классом, но разными значениями для одного и того же атрибута, когда я нажимаю DIV, предупреждение выдает всегда «1» (кажется, игнорирует объявление второго DIV). Почему .attr() не принимает правильное значение для второго DIV?

Answer 1

Если у вас есть $('.myClass').attr("iditem"), это всегда будет возвращать атрибут первого элемента в наборе, как описано в документации ^{[документы] þ} :

Получить значение атрибута для первого элемента в наборе совпадающих элементов.

Таким образом, вместо выбора всех элементов с классом myClass (это то, что делает $('.myClass'), независимо от того, где / когда он вызывается), вы хотите получить ссылку на элемент, по которому щелкнули. Просто сделайте:

$(this).attr('iditem');

this всегда ссылается на элемент, с которым был связан обработчик события.

Я предлагаю использовать атрибуты HTML5 data-* вместо пользовательских атрибутов, чтобы иметь как минимум действительный HTML5:

 <div class="myClass" data-item="1">

Затем можно использовать .data() ^{[документы]} для получения значения.

---

þ: Вы действительно должны прочитать документацию jQuery. Он содержит много примеров и подробное описание того, как работает каждый метод. Убедитесь, что вы также понимаете, как работают селекторы ^{[документы]} .

Answer 2

Я предполагаю, что вы хотите показать itemid предмета, на который вы нажимаете?Тогда это работает:

$('.myClass').click(function() {
    alert($(this).attr("iditem"));
})

Answer 3

$(".myClass") возвращает все элементы с классом myClass. Я думаю, что вы хотите что-то вроде этого:

    $(document).ready(function()
    {
        $('.myClass').click(function() {
            alert($(this).attr("iditem"));
        });
    });

Answer 4

alert($(".myClass").attr("iditem"));