如何获取存储在DOM元素中的数据？

Question

我有一个类为 bar 的DOM元素，它存储着数据 foo，而这个数据是另一个DOM元素的id。

<div class="bar" data="foo">...</div>

当我悬停在这样的元素上时，我希望获得数据（id）指向的DOM元素。我做了以下操作：

$(".bar").hover(function(){alert($("#"+$(this).data()));});

但是当我悬停时，出现了这个错误：

Uncaught Error: Syntax error, unrecognized expression: #[object Object]

我做错了什么，我应该怎么修复它？

- sawa

Answer 1

你正在混淆 data() 方法和元素的 data 属性。 data() 方法返回的是一个与元素关联的不相关数据对象，而不是你要查找的字符串。

---

解决方案 1 - data 作为属性 在你的示例中获取所需值，应该使用 attr() 方法查询属性：

$(".bar").hover(function(){alert($("#"+$(this).attr('data')));});

---

解决方案2 - 将数据作为对象

使用data()方法，您可以手动将信息附加到元素：

$('.bar').data('data','foo');
$(".bar").hover(function(){alert($("#"+$(this).data('data')));});

请注意，在此示例中，'data'只是元素数据对象中一个键的任意名称。有关data()方法的更多信息，请参见jQuery手册。

---

解决方案3 - 作为对象和HTML5属性的数据 我相信您最初的意图是查询HTML5数据属性作为data属性，并根据jQuery文档中所述，应该自动提取到jQuery的数据对象中。

但请注意，根据HTML5规范，HTML5数据属性应具有data-前缀。因此，为了使您的示例正常工作，该属性不能命名为data，而应该命名为data-something。例如：

<div class="bar" data-something="foo">...</div>

你可以使用jQuery的data()方法访问它:

 $(".bar").hover(function(){alert($("#"+$(this).data('something')));});

注意到如何使用data('something')来访问data-something，因为jQuery会自动删除data-前缀。

- Boaz

---

为什么我在这种情况下不能使用 data()？ - sawa

@sawa 请再查看更新后的答案。我相信这样更好地回答了你最初的问题。 - Boaz

我按照你的建议去做了。非常感谢你更详细的解释。data后面的一些东西，那就是我所缺少的。 - sawa

这是我见过的关于那个主题最好的总结。干得好！ - Jeremy J Starcher

Answer 2

您需要使用attr函数来访问属性。

$(".bar").hover(function() {
     alert($("#"+$(this).attr('data')));
   });

- mercsen

Answer 3

我知道没有人要求这个，但是在现代浏览器中，不需要使用jQuery就可以完成这个操作：

for (bar of document.getElementsByClassName('bar')) {
  bar.addEventListener('hover', e => alert(
    document.getElementById(e.target.attributes.data.value)
  ))
}

- remeika