Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Mengekstrak Atribut Data daripada Kelas pada Klik dalam JavaScript?

Bagaimana untuk Mengekstrak Atribut Data daripada Kelas pada Klik dalam JavaScript?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-28 15:33:15134semak imbas

How to Extract a Data Attribute from a Class on Click in JavaScript?

Pendengar Acara dan Pengekstrakan Atribut Berdasarkan Kelas dalam JavaScript

Dalam JavaScript, menambahkan pendengar acara pada elemen adalah penting untuk berinteraksi dengan DOM. Dalam keadaan ini, anda berhasrat untuk mendapatkan semula atribut daripada kelas apabila diklik. Kod berikut menunjukkan pendekatan:

var elements = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

Kod ini memilih elemen dengan nama kelas "nama kelas", memberikannya kepada objek seperti tatasusunan yang dinamakan elemen, dan kemudian menggelung melalui elemen. Untuk setiap elemen, pendengar acara ditambahkan pada acara 'klik', yang mencetuskan fungsi myFunction apabila elemen diklik. Dalam fungsi ini, kaedah getAttribute mendapatkan semula nilai "data-myattribute" bagi elemen yang diklik dan memaparkan makluman dengan nilai atribut.

Ingat, getElementsByClassName mengembalikan objek seperti tatasusunan, bukan tatasusunan. Oleh itu, gelung diperlukan untuk melintasi setiap elemen dan menambah pendengar acara secara individu.

Atas ialah kandungan terperinci Bagaimana untuk Mengekstrak Atribut Data daripada Kelas pada Klik dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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