Question

我在jsfiddle中尝试了这个并且它工作但是我无法在我的网站中使用数据属性。在这种情况下，我在警报中得到“未定义”：

<div data-test="something"></div>
<script>alert($('div').data('test'));</script>

这可能是什么原因？

Answer 1

在jsfiddle中你已经设置了dom。我认为你只需要复制脚本代码中的代码。

你遗漏了dom ready

<script>
$(document).ready(function(){
  alert($('div').data('test'));
});
</script>

Answer 2

您的网站上有很多div，但此脚本仅提醒第一个div data-test

编辑：，即在DOM中找到的第一个

Fiddle

解决方案：为div添加data-test来自

的ID

Answer 3

$('div')过于笼统的选择器。在只有一个元素的this fiddle中，您的代码运行正常。但是，在包含多个元素的this fiddle中，您的代码会失败：

<div></div>
<div data-test="something"></div>
<script>alert($('div').data('test'));</script>

$('div')选择页面上的每个<div>，但.data只获取jQuery集合中第一个元素的值：

...在匹配元素集中的第一个元素的命名数据存储中返回值。

因此，您正在尝试获取集合中第一个元素的data-test属性，在上面的示例中，该属性没有这样的属性。您需要使选择器更具体，选择您想要的确切元素。你可以试试：

在元素上使用id并使用$('div#someIdOnTheDiv')
不太优选，抓住具有{{1}}属性的任何<div>：data-test

Answer 4

您的网页中有很多div's，.data()会提醒第一个div。因此，您有两种方法可以获取数据值。

使用父div类和警报值。

$(document).ready(function(){ alert($('div.entry-content').children().data('test')); });

的 DEMO FIDDLE

注意：我刚刚使用了您在网站中使用的父div类。

将一些id或class放入div并使用它来提醒数据值。

<强> CODE：

<div id="datatest" data-test="something"></div> $( document ).ready(function() { alert($('div#datatest').data('test')); });

的 DEMO FIDDLE With ID

为什么尝试读取数据属性在我的网站中返回undefined？

4 个答案: