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具有相同的类,但同一属性的值不同,当我点击a时DIV,警告打印始终为"1"(似乎忽略了第二个声明DIV).为什么.attr()第二个没有采取正确的价值DIV？

Answer 1

假设你有$('.myClass').attr("iditem"),这将始终返回集合中第一个元素的属性,如文档 ^{[docs]中所述}:

获取匹配元素集中第一个元素的属性值.

因此,不是选择具有类的所有元素myClass($('.myClass')无论在何处/何时调用它都是什么),您希望获得对所单击元素的引用.简单地说:

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

this 始终引用事件处理程序绑定的元素.

我建议使用HTML5 data-*属性而不是自定义属性,以至少拥有有效的HTML5:

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

然后,您可以使用.data() ^[docs]检索值.

þ:你真的应该阅读jQuery的文档.它提供了许多示例和每种方法如何工作的详细说明.确保您也了解选择器^[docs]的工作原理.