我有一个带有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()时只能存储字符串。
其他回答
你也可以使用下面的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
请注意,jQuery .data()不会更新当你改变html5的数据属性与javascript。
如果你使用jQuery .data()来设置HTML元素中的数据属性,你最好使用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>
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和DOM保持同步,一个简单的选项是
$('#mydiv').data('myval',20).attr('data-myval',20);
[jQuery] .data() vs .attr() vs .extend()
jQuery方法.data()通过使用该方法更新由jQuery管理的内部对象,如果我没有错的话。
如果你想用一些扩展来更新你的数据属性,使用——
$('body').attr({ 'data-test': 'text' });
——否则为$('body')。attr(“测试数据”、“文本”);会工作得很好。
另一种实现方法是使用——
$.extend( $('body')[0].dataset, { datum: true } );
——它限制了对HTMLElement.prototype的任何属性更改。数据集,而不是任何额外的HTMLElement.prototype.attributes。