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”

（第二种情况下的“数据”）

锚元素是否没有 attr 或 data 方法，或者我的错误是什么？

Answer 1

看起来像它，因为您的this引用不是jquery对象。试试这些：

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

Answer 2

它准确地告诉你问题是什么。.data并且.attr是 jQuery 函数。如果您想使用 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"));
    }
}

jsFiddle