javascript - 无法使用jquery获取元素的属性

Question

我有这个html：

<img src="http://localhost:82/Clone//images/hosts/Kinx_9843a.jpg" data-name="/images/hosts/K_9843a.jpg" alt="">

我试图得到这个：

$('body').on('click','.hostPic',function(){ 
    console.log($(this).attr('data-name'));
});

每当按下图片时，我都想获取它的 data-name 属性，但它不起作用。undefined当我尝试检索该属性时，我会收到报告。有什么理由吗？

Answer 1

将hostPic类添加到该图像。

此外，您可以只使用.data('name')，但实际上并没有什么不同。较旧的浏览器可能会遇到问题.data，但这对我来说从来都不是问题。

Answer 2

$('.hostPic').click(function() {
  console.log($(this).data('name'));
}

Answer 3

确保您的图像具有“hostPic”类，然后在您的 jQuery 中执行以下操作：-

$('.hostPic').on('click', function() {
  console.log($(this).data('name'));
}

Answer 4

以下代码对我有用，也许您附加了错误的事件对象，您可以通过调试this对象而不是data-name.

另一件事是，如果您打算.data仅用于读取字符串，则应将.attr其用作.data缓存并尝试将值转换为适当的类型，number或者JSON它比.attr.

<img src="http://localhost:82/Clone//images/hosts/Kinx_9843a.jpg" data-name="/images/hosts/K_9843a.jpg" alt="">​

​$("img")​.click(function () { alert($(this).attr("data-name")); });​