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 ランタイム エラー: オブジェクトはプロパティまたはメソッド 'text' をサポートしていません

Answer 1

attr関数はオブジェクトのメンバーです。つまり、 onjQueryを呼び出す必要があります。$()this

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

編集：コメントで指摘されているように、これはおそらくまだより良い方法です：

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