jQuery数据(...)没有存储在DOM中？

Question

如果data-x在DOM中是这样的:

<div id="blah" data-x="143">Hello</div>

我用它修改它

$('#blah').data('x', 13687)

那么似乎data-x没有在DOM中修改(在下面的代码片段代码中使用浏览器的Inspect功能):

这是正常行为吗？

---

例:

console.log($('#blah').data('x'));
$('#blah').data('x', 13687)
console.log($('#blah').data('x'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="blah" data-x="143">Hello</div>

Answer 1

jQuery的data()方法不设置数据属性,它将数据存储在内部对象中.
HTML5数据属性将自动引入jQuery的数据对象,这意味着数据对象的初始值反映了属性中给出的任何内容,但更改值data() 不会更新属性,只会更新jQuery使用的内部数据对象.

所以是的,属性没有改变是正常的,它应该是那样的.

如果由于某种原因你必须改变实际属性,你可以使用 attr()

$('#blah').attr('data-x', 13687)

请注意,如果您始终data()在代码中使用,并且您没有使用依赖于data属性的其他脚本,则通常不需要这样做.

您将在文档中找到有关如何处理属性以及jQuery如何存储数据的更多信息