不能更新数据属性值

Although there are some examples about this on the web, it does not seem to work correctly. I can't figure out the problem.

尽管在网上有一些关于这个的例子，但它似乎并没有正确地工作。我解不出这道题。

I have this simple html

我有这个简单的html

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

Every time I click the link "change data value" I want to update the data value of data-num. For example I need it to be 1,2,3,4,... (plus 1 every time I click the link)

每次单击“更改数据值”链接时，我都希望更新data-num的数据值。例如，我需要1 2 3 4…(每次点击链接加1)

what I have is

我有是什么

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

The value changes one time from 0 to 1 every time. I can't make it incremental. Any suggestions what I'm doing wrong?

值每次从0变为1。我不能让它递增。有什么建议吗?

7 个解决方案

#1

EDIT: the answer just below is the good one.

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

You aren't using the data method correctly. The correct code to update data is:

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

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

So your example would be:

你的例子是:

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

#2

Use that instead, if you wish to change the attribute data-num of node element, not of data object:

相反，如果您希望更改节点元素的属性数据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: but you should use the data() object in virtually all cases, but not all...

PS:但是您应该在几乎所有的情况下使用data()对象，但不是所有情况下……

#3

If we wanted to retrieve or update these attributes using existing, native JavaScript, then we can do so using the getAttribute and setAttribute methods as shown below:

如果我们想使用现有的本地JavaScript检索或更新这些属性，那么可以使用getAttribute和setAttribute方法，如下所示:

JavaScript

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>

Through jQuery

通过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 or this documentation for jquery

请阅读这个关于普通js的文档或jquery的文档

#4

For myself, using Jquery lib 2.1.1 the following did NOT work the way I expected:

对于我自己来说，使用Jquery 2.1.1并不像我期望的那样:

Set element data attribute value:

设置元素数据属性值:

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

BUT the element itself remains without the attribute:

但是元素本身没有属性:

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

I needed the DOM updated so I could later do $('.my-class[data-num="myValue"]') //current length is 0

我需要更新DOM，以便以后可以执行$('.my-class[data-num="myValue"]) //当前长度为0

So I had to do

所以我必须这么做

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

To get the DOM to update:

更新DOM:

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

Whether the attribute exists or not $.attr will overwrite.

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

#5

Had similar problem and in the end I had to set both

有类似的问题，最后我不得不两者都设置

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

and

和

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

And after this

而在此之后

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

Hope this helps.

希望这个有帮助。

#6

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.

建议不会像@adeneo说的那样正确地更改Jquery数据attr的值。但出于某些原因，我没有看到他(或其他任何人)为那些试图更新数据attr的人发布正确的方法。答案,@Lucas Willems发布可能答案问题布莱恩Tompsett——汤莱恩有,但它不是调查的答案可能将其他用户。

Quick answer in regards to original inquiry statement

对原始询价单快速回复

-To update data-attr

——更新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.

易犯的错误* -必须在属性的开头有“data-”，以改变属性的值。

#7

Had a similar problem, I propose this solution althought is not supported in IE 10 and under.

有一个类似的问题，我建议这个解决方案在ie10和以下都不支持。

Given

鉴于

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

The Javascript standard defines a property called dataset to update data-example-update.

Javascript标准定义了一个名为dataset的属性，用于更新数据示例—更新。

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

Note: use camel case notation to access the correct data attribute.

注意:使用camel case符号来访问正确的数据属性。

Source: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

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

#1