3

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

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

4

2 回答 2

7

您将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-something使用 访问data('someting')，因为 jQuery 会自动删除data-前缀。

于 2013-01-20T12:08:36.930 回答
4

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

$(".bar").hover(function() {
     alert($("#"+$(this).attr('data')));
   });
于 2013-01-20T12:08:25.403 回答