Question

我有像

这样的div

<div data-a="aa">   </div>

然后我通过以下方式获取数据：

var data = $("div").data();

它的工作正常。然后我通过 data- attribute ：

添加这样的新数据

$("div").attr("data-b", "bb");

然后我再次获取数据

var updatedData = $("div").data();

但是，新值（data-b attr bb值）不存在。这是为什么？（我想通过data-属性管理数据）

Fiddle playground

在我的情况下使用属性是合适的，所以我不想要使用.data("key", "val")。 data-属性无论如何都是有效的

有趣的是，当我在第一次调用.data（）之前添加data-属性时 - 它可以正常工作。有没有办法忽视或重建＆＃39;缓存数据呢？ example here

Answer 1

使用.data("key","value")设置值

$("div").data("b", "bb");

还可以使用.data("key")获取值

var data = $("div").data("b");

Answer 2

当您使用data() api时，jquery使用内部私有数据结构来存储数据，因此不会更新属性值。

使用数据api时，无需使用data-前缀。

因此，一旦您使用数据api读取值，属性值就会被复制到内部数据结构中，之后对属性所做的任何更改都不会反映在数据api中。

演示：Fiddle

Answer 3

有两种方法可以将数据添加到元素，或者您可以使用jQuery的data（）函数，或者您可以手动添加＆＃39;数据属性＆＃39;

您遇到的问题是您可以随时使用data（）函数获取和设置数据属性的值。但是这个函数的SET属性在HTML文件中不可见。

在下面，＆＃39; data-c＆＃39;在HTML文件中看不到。

<div class='bar' data-a='avalue' data-b='bvalue'></div>

<script>
console.log($( "div" ).data());
$( "div" ).data('c','cvalue');
console.log($( "div" ).data());
</script>

Answer 4

尝试使用dataset

var article = document.querySelector('#div1'),
              updatedData = article.dataset;

Demo

参考JavaScript Access

添加新值后，jQuery .data（）不实际

4 个答案: