无法更新数据属性值

Question

虽然在网络上有一些关于此的例子,但它似乎无法正常工作.我无法弄清楚这个问题.

我有这个简单的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.我无法增量.我有什么错误吗？

Answer 1

如果您希望更改节点元素的属性data-num而不是数据对象的属性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

编辑:下面的答案是好的.

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

$('#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'); 

阅读本文档,了解vanilla 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,所以我以后可以做$('.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

基本上，有两种方法可以设置/更新数据属性值，具体取决于您的需要。不同的是，数据保存在哪里，

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

对这个评论更清楚的解释