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 [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

您确定将某种事件附加到调用这些语句的函数中吗？

您也可以使用vanilla 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

Object [object HTMLAnchorElement]没有方法'attr'

4 个答案:

HTML

的JavaScript