我有一个带有data-myval = "10"属性的div。我想要更新它的值;如果我使用div.data('myval',20),它不会改变吗?我只需要使用div.attr('data-myval','20')吗?
我是否混淆了HTML5和jQuery?请建议。谢谢!
编辑:更新div.data('myval')=20到div.data('myval',20),但HTML仍然没有更新。
我有一个带有data-myval = "10"属性的div。我想要更新它的值;如果我使用div.data('myval',20),它不会改变吗?我只需要使用div.attr('data-myval','20')吗?
我是否混淆了HTML5和jQuery?请建议。谢谢!
编辑:更新div.data('myval')=20到div.data('myval',20),但HTML仍然没有更新。
当前回答
如果你正在使用jQuery,请使用.data():
div.data('myval', 20);
可以使用.data()存储任意数据,但使用.attr()时只能存储字符串。
其他回答
HTML
<div id="mydiv" data-myval="10"></div>
JS
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').data('myval',20); //setter
Demo
参考
参考文献:
jQuery本身使用.data()方法来保存名称为“events”和“handle”的信息,并保留任何以下划线('_')开头的数据名称供内部使用。
值得注意的是,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>
请看这个演示
如果你正在使用jQuery,请使用.data():
div.data('myval', 20);
可以使用.data()存储任意数据,但使用.attr()时只能存储字符串。
要使jQuery和DOM保持同步,一个简单的选项是
$('#mydiv').data('myval',20).attr('data-myval',20);
你也可以使用下面的attr东西;
HTML
<div id="mydiv" data-myval="JohnCena"></div>
脚本
$('#mydiv').attr('data-myval', 'Undertaker'); // sets
$('#mydiv').attr('data-myval'); // gets
OR
$('#mydiv').data('myval'); // gets value
$('#mydiv').data('myval','John Cena'); // sets value
设置data-属性的另一种方法是使用dataset属性。
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
const el = document.querySelector('#user');
// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''
// set the data attribute
el.dataset.dateOfBirth = '1960-10-03';
// Result: el.dataset.dateOfBirth === 1960-10-03
delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined
// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true