javascript - オブジェクト [object HTMLAnchorElement] にはメソッド「attr」がありません

Question

console.log を使用して DOM 要素を調べています。DOM 要素はアンカーです。

 <a href="#" class="videoimage" data-id="ks3H_s3e-Wc"></a>

次のいずれかの行を使用して、その ID にアクセスして出力しようとすると、次のようになります。

console.log($this.attr(data-id));

また

console.log($this.data('id'));

エラーが発生します：

オブジェクト [object HTMLAnchorElement] にはメソッド「attr」がありません

(2 番目のケースでは「データ」)

アンカー要素に attr または data メソッドがありませんか、それとも私の間違いですか?

Answer 1

this参照がオブジェクトではないため、そのように見えjqueryます。代わりにこれらを試してください:

$(this).data('id')
$(this).attr('data-id')

Answer 2

何が問題なのかを正確に伝えています。.dataおよび.attrjQuery 関数です。JavaScript オブジェクトを使用して属性値を取得する場合は、要素に ID を指定した後、次の手順を実行します。

console.log(document.getElementById("a").getAttribute("data-id"));

jsFiddle : http://jsfiddle.net/hescano/pFdEj/

Answer 3

その場合、ページに何か他の問題があります。以下は機能します：

$(this).data("id")

http://jsfiddle.net/RQw8E/

をどのように使用してい$(this)ますか?

Answer 4

私のために働く：

HTML

<a href="#" class="videoimage" data-id="ks3H_s3e-Wc">Click</a>

JavaScript

$(".videoimage").click(function() {
    var dataID = $(this).data("id");
    var dataIDAttr = $(this).attr("data-id");
    console.log(dataID);
    console.log(dataIDAttr);
});

JSFiddle

これらのステートメントを呼び出す関数に何らかのイベントを付加したことは確かですか?

バニラJSを使用することもできます

var anchorArr = document.getElementsByTagName("a");
for (var i = 0; i < anchorArr.length; i++) {
    if(anchorArr[i].getAttribute("class")==="videoimage") {
        //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
        //quick and dirty, there are better ways to do this
        console.log(anchorArr[i].getAttribute("data-id"));
    }
}

jsフィドル