Tidak dapat memperbarui nilai atribut data

Meskipun ada beberapa contoh tentang ini di web, tampaknya ini tidak berfungsi dengan benar. Saya tidak tahu masalahnya.

Saya memiliki html sederhana ini

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

Setiap kali saya mengklik link "ubah nilai data", saya ingin memperbarui nilai data dari data-num. Misalnya saya membutuhkannya menjadi 1,2,3,4, ... (ditambah 1 setiap kali saya mengklik tautan)

apa yang saya miliki adalah

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

Nilainya berubah satu kali dari 0 menjadi 1 setiap kali. Saya tidak bisa membuatnya bertambah. Ada saran apa yang saya lakukan salah?

JAWABAN DI BAWAH INI ADALAH YANG BAIK

Anda tidak menggunakan metode data dengan benar. Kode yang benar untuk memperbarui data adalah:

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

Jadi contoh Anda adalah:

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

Gunakan itu sebagai gantinya, jika Anda ingin mengubah atribut data-num elemen node, bukan objek data :

DEMO

$('#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: tetapi Anda harus menggunakan objek data () di hampir semua kasus, tetapi tidak semua ...

Jika kita ingin mengambil atau memperbarui atribut ini menggunakan JavaScript asli yang sudah ada , maka kita dapat melakukannya dengan menggunakan metode getAttributedan setAttributeseperti yang ditunjukkan di bawah ini:

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>

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

Baca dokumentasi ini untuk vanilla js atau dokumentasi untuk jquery ini

Bagi saya sendiri, menggunakan Jquery lib 2.1.1 berikut ini TIDAK berfungsi seperti yang saya harapkan:

Tetapkan nilai atribut data elemen:

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

TAPI elemen itu sendiri tetap tanpa atribut:

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

Saya membutuhkan DOM diperbarui sehingga saya bisa melakukan $ ('. My-class [data-num = "myValue"]') // panjang saat ini adalah 0

Jadi saya harus melakukannya

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

Untuk mengupdate DOM:

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

Apakah atribut ada atau tidak $ .attr akan menimpa.

Punya masalah serupa dan pada akhirnya saya harus mengatur keduanya

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

dan

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

Dan setelah ini

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

Semoga ini membantu.

Pada dasarnya ada dua cara untuk mengatur / mengupdate nilai atribut data, tergantung kebutuhan Anda. Perbedaannya hanya, dimana datanya disimpan,

Jika Anda menggunakannya, .data()itu akan disimpan dalam variabel lokal yang dipanggil data_user, dan tidak terlihat pada pemeriksaan elemen, Jika Anda menggunakannya .attr()akan terlihat secara publik.

Penjelasan lebih jelas tentang komentar ini

Jawaban ini untuk mereka yang hanya ingin mengubah nilai atribut data

Saran tidak akan mengubah nilai atribut data Jquery Anda dengan benar seperti yang telah dinyatakan @adeneo. Untuk beberapa alasan, saya tidak melihat dia (atau orang lain) memposting metode yang benar bagi mereka yang ingin memperbarui data-attr mereka. Jawaban yang diposting oleh @Lucas Willems mungkin merupakan jawaban untuk masalah yang dimiliki Brian Tompsett - 汤 莱恩, tetapi bukan jawaban atas pertanyaan yang mungkin membawa pengguna lain ke sini.

Jawaban cepat sehubungan dengan pernyataan pertanyaan asli

-Untuk memperbarui data-attr

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

Kesalahan mudah * - harus ada "data-" di awal atribut yang ingin Anda ubah nilainya.

Memiliki masalah serupa, saya mengusulkan solusi ini meskipun tidak didukung di IE 10 dan di bawahnya.

Diberikan

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

Standar Javascript mendefinisikan properti yang disebut dataset untuk memperbarui data-example-update.

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

Catatan: gunakan notasi huruf besar-kecil untuk mengakses atribut data yang benar.

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

Saya memiliki masalah yang sama dengan tag data html yang tidak diperbarui ketika saya menggunakan jquery Tetapi mengubah kode yang melakukan pekerjaan sebenarnya dari jquery ke javascript bekerja.

Coba gunakan ini ketika tombol diklik: (Perhatikan bahwa kode utama adalah fungsi 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);

});