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

Question 1

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

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

Question 2

아래 답은 좋은 사람입니다

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

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

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

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

Question 3

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

데모

$('#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 () 객체를 사용해야하지만 전부는 아닙니다 …

Question 4

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

Question 5

나 자신을 위해 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이 덮어 씁니다.

Question 6

비슷한 문제가 있었고 결국 두 가지를 모두 설정해야했습니다.

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

과

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

그리고이 후

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

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

Question 7

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

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

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

Question 8

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

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

원문 문에 대한 빠른 답변

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

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

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