如何在HTML元素中设置数据属性
如何在HTML元素中设置数据属性
提问于 2012-11-23 14:29:11
我有一个带有data-myval = "10"属性的div。我想更新它的值；如果我使用div.data('myval',20)，它不会改变吗？我只需要使用div.attr('data-myval','20')吗？
我是不是把HTML5和jQuery搞混了？请给我建议。谢谢!
编辑:已将div.data('myval')=20更新为div.data('myval',20)，但仍未更新。
回答 4
Stack Overflow用户
发布于 2014-09-25 01:25:03
请注意，当您使用javascript更改jQuery .data()属性时，html5 data-不会更新。
如果您使用jQuery .data()在HTML元素中设置data-属性，最好使用jQuery .data()来读取它们。否则，如果动态更新属性，可能会出现不一致。例如，请参阅下面的setAttribute()、dataset()、attr()。更改该值，按下该按钮几次，即可看到控制台。
$("#button").on("click", function() {
var field = document.querySelector("#textfield")
switch ($("#method").val()) {
case "setAttribute":
field.setAttribute("data-customval", field.value)
break;
case "dataset":
field.dataset.customval = field.value
break;
case "jQuerydata":
$(field).data("customval", field.value)
break;
case "jQueryattr":
$(field).attr("data-customval", field.value)
break;
}
objValues = {}
objValues['$(field).data("customval")'] = $(field).data("customval")
objValues['$(field).attr("data-customval")'] = $(field).attr("data-customval")
objValues['field.getAttribute("data-customval")'] = field.getAttribute("data-customval")
objValues['field.dataset.customval'] = field.dataset.customval
console.table([objValues])
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Example</h1>
<form>
<input id="textfield" type="text" data-customval="initial">
<br/>
<input type="button" value="Set and show in console.table (F12)" id="button">
<br/>
<select id="method">
<option value="setAttribute">setAttribute</option>
<option value="dataset">dataset</option>
<option value="jQuerydata">jQuery data</option>
<option value="jQueryattr">jQuery attr</option>
</select>
<div id="results"></div>
</form>
Stack Overflow用户
发布于 2012-11-23 14:31:46
如果您使用的是jQuery，请使用.data()
div.data('myval', 20);您可以使用.data()存储任意数据，但在使用.attr()时只能存储字符串。
Stack Overflow用户
发布于 2020-01-29 23:02:30
要使jQuery和DOM保持同步，一个简单的选项可能是
$('#mydiv').data('myval',20).attr('data-myval',20); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13524107
复制相关文章
相似问题
腾讯云开发者
