jquery - 如何在 HTML 元素中设置数据属性

Question

我有一个属性为 data-myval = "10" 的 div。我想更新它的值(value)；如果我使用 div.data('myval',20)，它不会改变吗？我只需要使用 div.attr('data-myval','20') 吗？

我是否对 HTML5 和 jQuery 感到困惑？请指教。谢谢!

编辑:将 div.data('myval')=20 更新为 div.data('myval',20)，但 HTML 仍未更新。

Answer 1

HTML

<div id="mydiv" data-myval="10"></div>

JS

var a = $('#mydiv').data('myval'); //getter

$('#mydiv').data('myval',20); //setter

Demo

Reference

来自引用:

jQuery itself uses the .data() method to save information under the names 'events' and 'handle', and also reserves any data name starting with an underscore ('_') for internal use.

需要注意的是，jQuery 的 data() 不会改变 HTML 中的 data 属性。

所以，如果你需要改变 HTML 中的 data 属性，你应该使用 .attr() 来代替。

HTML

<div id="outer">
    <div id="mydiv" data-myval="10"></div>
</div>

​jQuery:

alert($('#outer').html());   // alerts <div id="mydiv" data-myval="10"> </div>
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());   //alerts <div id="mydiv" data-myval="20"> </div>

见 this demo