无法更新数据属性值

虽然在网上有一些这样的例子，但它似乎并不正确。 我无法弄清楚这个问题。

我有这个简单的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。 我不能让它增量。 任何build议我做错了什么？

Answer 1

您没有正确使用数据方法 。 更新数据的正确代码是：

 $('#foo').data('num', num); 

所以你的例子是：

 var num = $('#foo').data("num") + 1; console.log(num) $('#foo').data('num', num); console.log(num) 

Answer 2

如果您想要更改节点元素的属性data-num，而不是数据对象 ：

DEMO

 $('#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（）对象，但不是全部…

Answer 3

如果我们想使用现有的本地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'); 

阅读这个文档的香草js或jquery的这个文档

Answer 4

对于我自己而言，使用Jquery lib 2.1.1，以下内容不能按我期望的方式工作：

设置元素数据属性值：

 $('.my-class').data('num', 'myValue'); console.log($('#myElem').data('num');// as expected = 'myValue' 

但是元素本身仍然没有属性：

 <div class="my-class"></div> 

我需要更新的DOM，所以我可以稍后做$（'。我的class级[数据的数量=“myValue”]'）//当前长度是0

所以我必须这样做

 $('.my-class').attr('data-num', 'myValue'); 

要获取DOM更新：

 <div class="my-class" data-num="myValue"></div> 

该属性是否存在$ .attr将被覆盖。

Answer 5

有类似的问题，最后我不得不同时设置

 obj.attr('data-myvar','myval') 

和

 obj.data('myvar','myval') 

之后

 obj.data('myvar') == obj.attr('data-myvar') 

希望这可以帮助。

Answer 6

这个答案适用于那些试图改变数据属性值的人

build议不会像@adeneo所说的那样正确地更改Jquery数据的值。 不过，由于某种原因，我没有看到他（或其他人）为寻求更新数据的人发布正确的方法。 @Lucas Willems发布的答案可能是问题的答案 – 汤莱恩所在的问题，但这不是查询可能引起其他用户的答案。

关于原始询价单的快速回答

– 更新数据attr

 $('#ElementId').attr('data-attributeTitle',newAttributeValue); 

容易犯的错误* – 在你想要改变属性值的属性开头必须有“data-”。