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

Question

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

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"), это всегда будет возвращать атрибут первого элемента в наборе, как описано в documentation ^{[docs] þ}:

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

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

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

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

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

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

Вы можете использовать .data()^[docs] для извлечения значения.

---

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

Answer 2

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

Answer 3

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

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

Answer 4

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

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