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，该属性应为automatically pulled in to jQuery's data object。

但请注意，根据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-前缀。

Answer 2

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

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