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

