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

How to get data stored in a DOM element?

本文关键字：元素 DOM 数据 存储 何获取 获取      更新时间：2023-09-26

我有一个类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]

我做错了什么，我该如何修复它?

您将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()方法的更多信息，请参阅jQuery手册

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

我相信你的初衷是查询data属性作为HTML5数据属性，根据jQuery文档应该是automatically pulled in to jQuery's data object。

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

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

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

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

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

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

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

我知道没有人要求这样做，但这里是如何在没有jQuery的现代浏览器中做到这一点:

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