Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Mendapatkan Nilai Atribut `data-id` Menggunakan jQuery?

Bagaimana untuk Mendapatkan Nilai Atribut `data-id` Menggunakan jQuery?

Susan Sarandon
Lepaskan: 2024-12-10 13:44:14
asal
1081 orang telah melayarinya

How to Retrieve a `data-id` Attribute Value Using jQuery?

Mengakses Atribut data-id dengan jQuery

Apabila bekerja dengan pemalam jQuery Quicksand, selalunya perlu untuk mendapatkan semula atribut 'data-id' elemen yang diklik untuk menyampaikan maklumat kepada pelbagai perkhidmatan web. Begini cara untuk mendapatkan nilai atribut ini dengan berkesan:

Atribut 'data-id' boleh diakses menggunakan kaedah .attr() dalam jQuery. Sintaks adalah seperti berikut:

$(this).attr("data-id")
Salin selepas log masuk

Ungkapan ini mengembalikan nilai atribut 'data-id' sebagai rentetan.

Contohnya, jika elemen yang diklik mempunyai HTML berikut:

<li data-id="id-40">...</li>
Salin selepas log masuk

Kod jQuery berikut akan mendapatkan semula 'data-id' attribute:

$("#list li").on('click', function() {
  // Get the data-id value
  var dataId = $(this).attr("data-id");
  // Use the dataId value as needed
});
Salin selepas log masuk

Sebagai alternatif, anda boleh menggunakan kaedah .data() untuk jQuery versi 1.4.3 dan ke atas. Kaedah .data() mengembalikan nilai 'data-id' sebagai jenis JavaScript asli (cth., nombor, boolean) dan bukannya rentetan.

$(this).data("id")
Salin selepas log masuk

Ingat, apabila menggunakan kaedah .data() , bahagian selepas 'data-' mestilah huruf kecil. Contohnya, 'data-idNum' akan gagal, manakala 'data-idnum' akan berjaya.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Nilai Atribut `data-id` Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan