jquery - 单击时如何使用jquery从列表项中获取数据值

Question

我有一些像这样的 HTML：

<div id="adiv">
    <ul>
            <li data-id="3">Cat</li>
            <li data-id="4">Dog</li>
        </ul>
</div>

我想要的是在用户单击列表项时提醒 data-id 值。

在jquery中我试过：

$('li').click(function () {
        alert(this.attr('data-id'));
    });

虽然抛出异常。谁能告诉我我做错了什么以及如何解决？

例外是：Microsoft JScript 运行时错误：对象不支持属性或方法“文本”

Answer 1

该attr函数是jQuery对象的成员，这意味着您需要$()调用this：

$('li').click(function () {
    alert($(this).attr('data-id'));
});

编辑：正如评论中指出的那样，这可能是一个更好的方法：

$('li').click(function () {
    alert($(this).data('id'));
});