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

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

웹에 이에 대한 몇 가지 예가 있지만, 올바르게 작동하지 않는 것 같습니다.저는 그 문제를 알아낼 수 없습니다.

나는 이 간단한 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로 한 번씩 변경됩니다.증분으로 만들 수 없습니다.제가 뭘 잘못하고 있는지에 대한 제안이 있나요?

데이터 개체가 아닌 노드 요소의 data-number 속성을 변경하려면 대신 사용합니다.

데모

$('#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: 하지만 사실상 모든 경우에 데이터() 객체를 사용해야 합니다. 하지만 전부는...

아래의 답은 좋은 답입니다.

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

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

예를 들어 다음과 같습니다.

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

기존의 네이티브 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>

나중에 $(.my-class[.mys-num="myValue"]) //현재 길이가 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 데이터 특성의 값은 올바르게 변경되지 않습니다.하지만 왠지 그(또는 다른 사람)가 데이터 특성을 업데이트하려는 사람들에게 올바른 방법을 게시하는 것을 보지 못하고 있습니다.@Lucas Willms가 올린 답은 Brian Tompsett이 가지고 있는 문제에 대한 답일 수 있지만, 다른 사용자들을 여기로 데려올 수 있는 질문에 대한 답은 아닙니다.

원래 문의명세서에 대한 빠른 답변

-데이터 특성을 업데이트하려면

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

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

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

정해진

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

Javascript 표준은 데이터 예제 업데이트를 위해 데이터 집합이라는 속성을 정의합니다.

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

참고: 올바른 데이터 속성에 액세스하려면 카멜 대소문자 표기법을 사용합니다.

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

jquery를 사용할 때 html 데이터 태그가 업데이트되지 않는 문제가 있었지만 실제 작업을 하는 코드를 jquery에서 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);

});

언급URL : https://stackoverflow.com/questions/17762906/cant-update-data-attribute-value