jquery - 为什么尝试读取数据属性在我的站点中返回未定义？

Question

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

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

这可能是什么原因？

Answer 1

$('div')选择器太笼统了。在这个只有一个元素的小提琴中，您的代码运行良好。但是，在这个包含多个元素的小提琴中，您的代码失败了：

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

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

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

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

• 在元素上使用id并选择它$('div#someIdOnTheDiv')
• 不太理想的是，抓住任何<div>具有以下data-test属性的东西：$('div[data-test]')

Answer 2

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

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

小提琴

解决方案：添加一个div你想从中获取data-test的id

Answer 3

在 jsfiddle 中，您已准备好 dom。而且我认为您只需将代码复制粘贴到脚本标记中。

你在dom ready这里失踪了

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

Answer 4

您的页面中有很多内容div's，并且.data()会提醒第一个 div。因此，您有两种选择来获取数据值。

1. 使用父 div 类和警报值。

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

DEMO FIDDLE

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

1. 将一些id或放入classdiv 并使用它来提醒数据值。

代码：

<div id="datatest" data-test="something"></div>

$( document ).ready(function() {
    alert($('div#datatest').data('test'));
});

DEMO FIDDLE With ID