데이터 속성 값을 업데이트 할 수 없습니다.

데이터 속성 값을 업데이트 할 수 없습니다.

---

웹에 이에 대한 몇 가지 예가 있지만 제대로 작동하지 않는 것 같습니다. 문제를 파악할 수 없습니다.

이 간단한 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로 한 번 변경됩니다. 점진적으로 만들 수 없습니다. 내가 뭘 잘못하고 있는지 제안?

---

편집 : 바로 아래의 대답은 좋은 것입니다.

데이터 방법을 올바르게 사용하고 있지 않습니다 . 데이터를 업데이트하는 올바른 코드는 다음과 같습니다.

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

따라서 귀하의 예는 다음과 같습니다.

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

---

대신 데이터 객체가 아닌 노드 요소의 속성 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);
});

추신 :하지만 거의 모든 경우에 data () 객체를 사용해야하지만 전부는 아닙니다 ...

---

기존의 기본 JavaScript를 사용하여 이러한 속성을 검색하거나 업데이트 하려면 아래와 같이 getAttribute및 setAttribute메소드를 사용하면 됩니다.

자바 스크립트

<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에 대한이 문서를 읽으십시오.

---

나 자신을 위해 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"]') // current length is 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')

And after this

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

Hope this helps.

---

Basically, there are two ways to set / update data attribute value, depends on your need. The difference is just, where the data saved,

If you use .data() it will be saved in local variable called data_user, and its not visible upon element inspection, If you use .attr() it will be publicly visible.

Much clearer explanation on this comment

---

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

Given

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

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

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

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

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

---

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.

---

I had the same problem of the html data tag not updating when i was using jquery But changing the code that does the actual work from jquery to javascript worked.

Try using this when the button is clicked: (Note that the main code is Javascripts setAttribute() function.)

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

});

참고URL : https://stackoverflow.com/questions/17762906/cant-update-data-attribute-value