javascript - 如何获取存储在 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]

我做错了什么，我该如何解决？

Answer 1

您将 data() 方法与元素的 data 属性混淆了。

data() 方法返回附加到元素的不相关数据对象，而不是您要查找的字符串。

---

解决方案 1 - 数据作为属性

要在示例中获取您要查找的值，您应该使用 attr() 方法查询属性:

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

---

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

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

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

请注意，在这种情况下，'data' 只是元素数据对象中键的任意名称。有关 data() 方法的更多信息，请参阅 the jQuery manual

---

解决方案 3 - 数据作为对象和 HTML5 属性

我相信您的初衷是查询 data 属性作为 HTML5 数据属性，根据 the jQuery documentation应该自动拉入 jQuery 的数据对象。

但是，请注意，根据 HTML5 specification , HTML5 数据属性应该有一个 data- 前缀。因此，为了让您的示例正常工作，该属性不能命名为 data，而是命名为 data-something。例如:

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

然后您可以使用 jQuery 的 data() 方法访问它:

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

请注意 data-something 是如何通过 data('someting') 访问的，因为 jQuery 会自动删除 data- 前缀。