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") ，这将始终返回集合中第一个元素的属性，如文档^{[docs]中所述} ：

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

因此，不是选择具有类myClass 所有元素（即$('.myClass')所做的，无论在何处/何时调用它），您都希望获得对被点击元素的引用。 简单地说：

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

this总是指事件处理程序绑定的元素。

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

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

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

---

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

Answer 2

我假设你想要显示你点击的项目的itemid？ 然后，这工作：

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

Answer 3

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

Answer 4

$(".myClass")返回类myClass所有元素。 我想你想要这样的东西：

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