Nie można zaktualizować wartości atrybutu danych

Chociaż istnieje kilka przykładów na ten temat w Internecie, wydaje się, że nie działa poprawnie. Nie mogę zrozumieć problemu.

Mam ten prosty html

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

Za każdym razem, gdy klikam łącze „zmień wartość danych”, chcę zaktualizować wartość danych data-num. Na przykład potrzebuję 1,2,3,4, ... (plus 1 za każdym razem, gdy klikam link)

co mam to

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

Wartość zmienia się za każdym razem od 0 do 1. Nie mogę zrobić tego przyrostowo. Jakieś sugestie, co robię źle?

ODPOWIEDŹ PONIŻSZA JEST DOBRA

Nie używasz poprawnie metody danych . Prawidłowy kod do aktualizacji danych to:

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

Twój przykład byłby taki:

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

Użyj tego zamiast tego, jeśli chcesz zmienić atrybut numer-danych elementu węzła, a nie obiektu danych :

PRÓBNY

$('#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: ale powinieneś używać obiektu data () praktycznie we wszystkich przypadkach, ale nie we wszystkich ...

Jeśli chcieliśmy pobrać lub zaktualizować te atrybuty przy użyciu istniejącego, natywnego języka JavaScript , możemy to zrobić za pomocą getAttributeisetAttribute metod , jak pokazano poniżej:

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>

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

Przeczytaj tę dokumentację dla vanilla js lub tę dokumentację dla jquery

Dla siebie, używając Jquery lib 2.1.1, następujące rzeczy NIE działały tak, jak się spodziewałem:

Ustaw wartość atrybutu danych elementu:

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

ALE sam element pozostaje bez atrybutu:

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

Potrzebowałem zaktualizować DOM, aby później móc wykonać $ ('. My-class [data-num = "myValue"]') // aktualna długość to 0

Więc musiałem to zrobić

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

Aby zaktualizować DOM:

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

Czy atrybut istnieje, czy nie, $ .attr nadpisze.

Miałem podobny problem i ostatecznie musiałem ustawić oba

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

i

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

A potem

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

Mam nadzieję że to pomoże.

Zasadniczo istnieją dwa sposoby ustawiania / aktualizowania wartości atrybutu danych, w zależności od potrzeb. Różnica polega tylko na tym, gdzie zapisane dane,

Jeśli użyjesz .data(), zostanie zapisana w zmiennej lokalnej o nazwie data_user, a nie będzie widoczna po sprawdzeniu elementu, jeśli użyjesz.attr() będzie publicznie widoczna.

Znacznie jaśniejsze wyjaśnienie tego komentarza

Ta odpowiedź jest dla tych, którzy chcą po prostu zmienić wartość atrybutu danych

Sugerowane nie zmieni poprawnie wartości atr danych Jquery, jak stwierdził @adeneo. Jednak z jakiegoś powodu nie widzę, aby on (ani inni) publikowali poprawną metodę dla tych, którzy chcą zaktualizować swój atrybut danych. Odpowiedź, którą opublikował @Lucas Willems, może być odpowiedzią na problem Briana Tompsetta - 汤 莱恩, ale nie jest to odpowiedź na pytanie, które może przyciągać tutaj innych użytkowników.

Szybka odpowiedź na oryginalne zapytanie ofertowe

-Aby zaktualizować atrybut data-attr

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

Łatwe pomyłki * - na początku atrybutu, którego wartość chcesz zmienić, musi znajdować się „data-”.

Miałem podobny problem, proponuję to rozwiązanie, chociaż nie jest obsługiwane w IE 10 i poniżej.

Dany

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

Standard Javascript definiuje właściwość o nazwie dataset, która aktualizuje przykładową aktualizację danych.

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

Uwaga: użyj notacji wielbłąda, aby uzyskać dostęp do prawidłowego atrybutu danych.

Źródło: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Miałem ten sam problem z nieaktualizowaniem się znacznika danych html, gdy korzystałem z jquery, ale zmiana kodu, który wykonuje rzeczywistą pracę z jquery na javascript, działała.

Spróbuj użyć tego po kliknięciu przycisku: (Zauważ, że głównym kodem jest funkcja setAttribute () JavaScript .)

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

});