Question

虽然网上有一些关于此的例子，但它似乎无法正常工作。我无法弄清楚问题。

我有这个简单的HTML

         <div id="foo" data-num="0"></ div>
         <a href="#" id="changeData">change data value</a>

每次点击链接＆＃34;更改数据值＆＃34;我想更新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。我无法增量。我有什么建议我做错了吗？

Answer 1

如果您希望更改节点元素的属性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 2

编辑：下面的答案是好的。

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

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

所以你的例子是：

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

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');

Read this documentation for vanilla js或this documentation for 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，以后我可以做 $（'。my-class [data-num =“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

有一个类似的问题，我建议这个解决方案虽然在IE 10及以下不支持。

给出

<div id='example' data-example-update='1'></div>

Javascript标准定义了一个名为dataset的属性来更新data-example-update。

document.getElementById('example').dataset.exampleUpdate = 2;

注意：使用camel case表示法来访问正确的数据属性。

来源：https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Answer 7

基本上，有两种设置/更新数据属性值的方法，具体取决于您的需要。区别只是保存数据的位置

如果您使用.data()，它将保存在名为data_user的局部变量中，并且在元素检查时不可见，如果您使用.attr()，它将是公开可见的。

更清晰的解释on this comment

Answer 8

这个答案适合那些只想改变数据属性值的人

建议不会像@adeneo所说的那样正确更改Jquery data-attr的值。出于某种原因，我没有看到他（或任何其他人）为那些寻求更新他们的数据的人发布正确的方法。 @Lucas Willems发布的答案可能是Brian Tompsett问题的答案 - 汤莱恩正在解决这个问题，但这不是可能将其他用户带到此处的调查的答案。

关于原始查询声明的快速回答

- 更新data-attr

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

容易出错* - 必须有＆＃34;数据 - ＆＃34;在您的属性的开头，您正在寻找更改。

的值

Answer 9

我有同样的问题，当我使用jquery时html数据标签没有更新，但是将执行实际工作的代码从jquery更改为javascript起作用。

尝试在单击按钮时使用它：（请注意，主要代码是Javascript 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);

});

无法更新数据属性值

9 个答案: