首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在HTML元素中设置数据属性

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

Stack Overflow用户
提问于 2012-11-23 14:29:11
回答 4查看 510.9K关注 0票数 298

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

我是不是把HTML5和jQuery搞混了?请给我建议。谢谢!

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

EN

回答 4

Stack Overflow用户

发布于 2014-09-25 01:25:03

请注意,当您使用javascript更改jQuery .data()属性时,html5 data-不会更新。

如果您使用jQuery .data()在HTML元素中设置data-属性,最好使用jQuery .data()来读取它们。否则,如果动态更新属性,可能会出现不一致。例如,请参阅下面的setAttribute()dataset()attr()。更改该值,按下该按钮几次,即可看到控制台。

代码语言:javascript
复制
$("#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])
})
代码语言:javascript
复制
<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>

票数 34
EN

Stack Overflow用户

发布于 2012-11-23 14:31:46

如果您使用的是jQuery,请使用.data()

代码语言:javascript
复制
div.data('myval', 20);

您可以使用.data()存储任意数据,但在使用.attr()时只能存储字符串。

票数 9
EN

Stack Overflow用户

发布于 2020-01-29 23:02:30

要使jQuery和DOM保持同步,一个简单的选项可能是

代码语言:javascript
复制
$('#mydiv').data('myval',20).attr('data-myval',20);        
票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13524107

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档