Cara Mengambil Nilai Data Attribute dengan jQuery

Atribut data-* menyimpan informasi khusus di elemen HTML, seperti ID produk atau harga pada tombol. Artikel ini membahas cara mengambil nilai data attribute dengan jQuery.

Metode .data()

<button id="beli" data-id="42" data-harga="15000">Beli</button>

<script>
$("#beli").data("id");    // 42 (otomatis jadi angka)
$("#beli").data("harga"); // 15000
</script>

Menariknya, .data() otomatis mengubah angka menjadi tipe number, bukan string.

Contoh Kasus: Tombol Beli Dinamis

<script>
$(".beli").click(function() {
    const id = $(this).data("id");
    const harga = $(this).data("harga");
    $.post("keranjang.php", { produk: id }, function() {
        alert("Ditambahkan! Harga: Rp" + harga.toLocaleString("id-ID"));
    });
});
</script>

Kesimpulan

Gunakan .data("nama") untuk membaca atribut data-*, cara rapi menyimpan informasi tambahan di elemen. Sangat berguna untuk tombol aksi seperti beli, dengan nilai numerik yang otomatis bertipe angka.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi jQuery (api.jquery.com).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *