我有一个带有data-myval = "10"
属性的div。我想更新它的值;如果我使用div.data('myval',20)
,它不会改变吗?我只需要使用div.attr('data-myval','20')
吗?
我是不是把HTML5和jQuery搞混了?请给我建议。谢谢!
编辑:已将div.data('myval')=20
更新为div.data('myval',20)
,但仍未更新。
发布于 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>
发布于 2012-11-23 14:31:46
如果您使用的是jQuery,请使用.data()
div.data('myval', 20);
您可以使用.data()
存储任意数据,但在使用.attr()
时只能存储字符串。
发布于 2020-01-29 23:02:30
要使jQuery和DOM保持同步,一个简单的选项可能是
$('#mydiv').data('myval',20).attr('data-myval',20);
https://stackoverflow.com/questions/13524107
复制相似问题