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

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

이 간단한 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)

대신 데이터 객체가 아닌 노드 요소의 속성 데이터 번호를 변경 하려면 사용하십시오 .

데모

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

그리고이 후

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

도움이 되었기를 바랍니다.

기본적으로 필요에 따라 데이터 속성 값을 설정 / 업데이트하는 두 가지 방법이 있습니다. 차이점은 데이터가 저장되는 곳에

사용 .data()하면라는 로컬 변수에 저장되며 data_user, 요소 검사시 표시되지 않으며 사용 .attr()하면 공개적으로 표시됩니다.

이 댓글에 대한 훨씬 더 명확한 설명

이 답변은 데이터 속성의 값을 변경하려는 사람들을위한 것입니다.

제안은 @adeneo가 말했듯이 Jquery data-attr의 값을 올바르게 변경하지 않습니다. 그러나 어떤 이유로 든, 나는 그 (또는 다른 사람들)이 데이터 작성자를 업데이트하려는 사람들을 위해 올바른 방법을 게시하는 것을 보지 못했습니다. @Lucas Willems가 올린 답변은 Brian Tompsett-汤 莱恩가 겪고있는 문제에 대한 답변 일 수 있지만 다른 사용자를 여기로 데려 오는 질문에 대한 답변은 아닙니다.

원문 문에 대한 빠른 답변

-데이터를 업데이트하려면

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

쉬운 실수 *-값을 변경하려는 속성의 시작 부분에 "데이터-"가 있어야합니다.

비슷한 문제가 있었지만 IE 10 이하에서는 지원되지 않지만이 솔루션을 제안합니다.

주어진

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

Javascript 표준은 data-example-update를 업데이트하기 위해 dataset이라는 속성을 정의합니다.

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

참고 : 올바른 데이터 속성에 액세스하려면 카멜 케이스 표기법을 사용하십시오.

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

jquery를 사용할 때 html 데이터 태그가 업데이트되지 않는 동일한 문제가 있었지만 실제 작업을 수행하는 코드를 jquery에서 javascript로 변경하면 효과가있었습니다.

버튼을 클릭했을 때 이것을 사용해보십시오 : (메인 코드는 Javascripts 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);

});