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”（它似乎忽略了第二个{{1}的声明}）。为什么DIV没有为第二个.attr()采用正确的值？

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

我假设您要显示您点击的项目的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"));
        });
    });