虽然网上有一些这样的例子，但它似乎不能正常工作。我无法弄清楚问题所在。
我有这个简单的 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 一次。我不能让它增量。关于我做错了什么有什么建议吗？
如果您希望更改节点元素的属性 data-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() 对象，但不是所有情况......
下面的答案是好的
您没有正确使用数据方法。更新数据的正确代码是：
$('#foo').data('num', num);
所以你的例子是：
var num = $('#foo').data("num") + 1;
console.log(num)
$('#foo').data('num', num);
console.log(num)
如果我们想使用现有的原生JavaScript检索或更新这些属性，那么我们可以使用getAttributeandsetAttribute方法来实现，如下所示：
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 将被覆盖。
有类似的问题，最后我不得不同时设置
obj.attr('data-myvar','myval')
和
obj.data('myvar','myval')
在这之后
obj.data('myvar') == obj.attr('data-myvar')
希望这可以帮助。
基本上，有两种方法可以设置/更新数据属性值，取决于您的需要。不同的是，数据保存在哪里，
如果您使用.data()它将保存在名为 的局部变量中data_user，并且在元素检查时不可见，如果您使用.attr()它将公开可见。
对此评论有更清晰的解释
This answer is for those seeking to just change the value of a data-attribute
The suggested will not change the value of your Jquery data-attr correctly as @adeneo has stated. For some reason though, I'm not seeing him (or any others) post the correct method for those seeking to update their data-attr. The answer that @Lucas Willems has posted may be the answer to problem Brian Tompsett - 汤莱恩 is having, but it's not the answer to the inquiry that may be bringing other users here.
Quick answer in regards to original inquiry statement
-To update data-attr
$('#ElementId').attr('data-attributeTitle',newAttributeValue);
Easy mistakes* - there must be "data-" at the beginning of your attribute you're looking to change the value of.
有一个类似的问题，我建议这个解决方案虽然在 IE 10 及以下版本中不受支持。
给定
<div id='example' data-example-update='1'></div>
Javascript 标准定义了一个名为 dataset 的属性来更新 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);
});