从 attribute.dataset 和 jquery .data() 方法获得不同的结果

问题描述

我得到了意想不到的结果，当我调试问题时，我发现我没有通过 Jquery .data() 方法获得正确的数据属性值。很明显值不正确，当我将代码更改为 attribute.dataset.name（元素的本机属性）时，它返回了我的预期值。

here's the screenshot of an error

任何想法，可能的原因是什么，因为我在我的情况下使用了很多数据属性，并且不想在我通过 Jquery .date() 方法访问数据属性的任何地方更改代码。

解决方法

.data(prop) 和 .dataset[prop] 可以不同，如果：

• HTML 数据集包含一个值

• jQuery 的 .data 之前已在元素上调用以存储与同一键关联的值

示例：

$('div').data('foo','newFooVal');

console.log($('div').data('foo'));
console.log($('div')[0].dataset.foo);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-foo="oldFooVal"></div>

jQuery 的 .data 将检索：

• 任何以前用 .data 设置的值（这将与数据集完全无关）

• 如果没有为该元素的键设置先前的值，则将返回数据集中该键的值

所以你必须小心设置和检索。诚然，这并不完全直观，因为它会在不同情况下做不同的事情。