尽管网上有一些有关此的示例，但它似乎无法正常工作。我不知道问题所在。
我有这个简单的html
<div id="foo" data-num="0"></ div>
<a href="#" id="changeData">change data value</a>
每次我单击“更改数据值”链接时，我想更新data-num的数据值。例如，我需要将其设置为1,2,3,4，...（每次单击链接时加1）
我所拥有的是
var num = $('#foo').data("num");
console.log(num);
num = num+1;
console.log(num);
$('#foo').attr('data-num', num);
该值每次从0变为1。我不能使其递增。有什么建议我做错了吗？
Answers:
答案是好的
您没有正确使用数据方法。更新数据的正确代码是：
$('#foo').data('num', num);
因此，您的示例将是：
var num = $('#foo').data("num") + 1;
console.log(num)
$('#foo').data('num', num);
console.log(num)
使用该相反，如果你想改变不是数据对象的节点元素的属性数据NUM， ：
$('#changeData').click(function (e) {
e.preventDefault();
var num = +$('#foo').attr("data-num");
console.log(num);
num = num + 1;
console.log(num);
$('#foo').attr('data-num', num);
});
PS：但是您实际上应该在所有情况下都使用data（）对象，但不是全部...
.prop()首选），但这不是使用数据的正确方法。
.prop()将访问或更改DOM中任何属性或属性的值，但不访问HTML。.attr()将访问和重写HTML，这使其速度比慢.prop()。您不应该使用.attr()代替.data()，不仅仅是因为它速度较慢，而且因为那不是应该的工作方式。jsfiddle.net/eXA76/2
.data()。通过忽略正确的方法并使用该属性，您将朝着有意识地引起问题的方向发展。
如果我们想使用现有的本机JavaScript检索或更新这些属性，则可以使用如下所示的getAttribute和setAttribute方法：
的JavaScript
<script>
// 'Getting' data-attributes using getAttribute
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'
// 'Setting' data-attributes using setAttribute
plant.setAttribute('data-fruit','7'); // Pesky birds
</script>
通过jQuery
// Fetching data
var fruitCount = $(this).data('fruit');
// Above does not work in firefox. So use below to get attribute value.
var fruitCount = $(this).attr('data-fruit');
// Assigning data
$(this).data('fruit','7');
// But when you get the value again, it will return old value.
// You have to set it as below to update value. Then you will get updated value.
$(this).attr('data-fruit','7');
就我自己而言，使用Jquery lib 2.1.1时，以下操作无法达到我期望的方式：
设置元素数据属性值：
$('.my-class').data('num', 'myValue');
console.log($('#myElem').data('num'));// as expected = 'myValue'
但是元素本身仍然没有属性：
<div class="my-class"></div>
我需要更新DOM，以便稍后可以执行$（'。my-class [data-num =“ myValue”]'）//当前长度为0
所以我要做
$('.my-class').attr('data-num', 'myValue');
要更新DOM：
<div class="my-class" data-num="myValue"></div>
该属性是否存在将覆盖$ .attr。
基本上，有两种方法来设置/更新数据属性值，这取决于您的需要。不同之处在于，数据保存在哪里，
如果使用.data()，它将保存在名为的局部变量中data_user，并且在元素检查时不可见；如果使用.attr()，则将是公开可见的。
关于此评论的更清晰的解释
这个答案是给那些只想改变数据属性值的人的
建议将不会如@adeneo所述正确更改Jquery数据属性的值。但是由于某种原因，我没有看到他（或其他任何人）为寻求更新其数据属性的人发布正确的方法。@Lucas Willems发布的答案可能是对汤姆·布莱恩·汤普塞特（Brian Tompsett-汤莱恩）所遇到的问题的答案，但这不是可能将其他用户带到这里的询问的答案。
关于原始查询声明的快速解答
-更新数据属性
$('#ElementId').attr('data-attributeTitle',newAttributeValue);
容易犯的错误*-您要更改其属性的属性的开头必须有“ data-”。
遇到类似的问题，尽管IE 10及以下版本不支持此解决方案，但我还是提出了此解决方案。
给定
<div id='example' data-example-update='1'></div>
Javascript标准定义了一个称为数据集的属性来更新data-example-update。
document.getElementById('example').dataset.exampleUpdate = 2;
注意：使用驼峰大小写表示法访问正确的数据属性。
来源：https : //developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
我在使用jquery时遇到同样的问题，即html数据标签未更新，但是将实际工作从jquery更改为javascript的代码起作用了。
单击按钮时，尝试使用此方法：（请注意，主要代码是Javascripts setAttribute（）函数。）
function increment(q) {
//increment current num by adding with 1
q = q+1;
//change data attribute using JS setAttribute function
div.setAttribute('data-num',q);
//refresh data-num value (get data-num value again using JS getAttribute function)
num = parseInt(div.getAttribute('data-num'));
//show values
console.log("(After Increment) Current Num: "+num);
}
//get variables, set as global vars
var div = document.getElementById('foo');
var num = parseInt(div.getAttribute('data-num'));
//increment values using click
$("#changeData").on('click',function(){
//pass current data-num as parameter
increment(num);
});
.data()。该属性不会更新，并且不应仅用于初始设置数据而用于存储或检索数据。