Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Menambahkan Pendengar Acara Klik pada Berbilang Elemen dengan Kelas yang Sama?

Bagaimana untuk Menambahkan Pendengar Acara Klik pada Berbilang Elemen dengan Kelas yang Sama?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-09 16:30:02651semak imbas

How to Add Click Event Listeners to Multiple Elements with the Same Class?

Menambahkan Pendengar Acara Klik pada Elemen dengan Kelas Yang Sama

Dalam senario ini, anda mempunyai paparan senarai untuk memadamkan ID dan ingin menambah amaran pengesahan kepada semua elemen dengan kelas "padam." Walau bagaimanapun, anda telah menghadapi masalah di mana hanya elemen pertama dengan kelas nampaknya menerima pendengar.

Penyelesaian

Untuk menyelesaikan masalah ini, anda perlu menggunakan querySelectorAll bukannya querySelector. querySelectorAll mengembalikan NodeList yang mengandungi semua elemen dengan kelas yang ditentukan:

var deleteLink = document.querySelectorAll('.delete');

Kini, anda boleh lelaran melalui NodeList dan menambah pendengar acara pada setiap elemen:

for (var i = 0; i < deleteLink.length; i++) {
    deleteLink[i].addEventListener('click', function(event) {
        if (!confirm("sure u want to delete " + this.title)) {
            event.preventDefault();
        }
    });
}

Selain itu, hanya menghalang tindakan lalai jika pengguna tidak mengesahkan pemadaman. Ini memastikan pemadaman hanya dilaksanakan jika pengguna secara eksplisit memilih untuk meneruskan.

Peningkatan ES6

Menggunakan ES6, anda boleh memudahkan gelung menggunakan Array.prototype.forEach :

Array.from(deleteLinks).forEach(link => {
    link.addEventListener('click', event => {
        if (!confirm(`sure u want to delete ${this.title}`)) {
            event.preventDefault();
        }
    });
});

Versi ini menggunakan rentetan templat (diperkenalkan pada ES2015) untuk sintaks yang lebih bersih.

Atas ialah kandungan terperinci Bagaimana untuk Menambahkan Pendengar Acara Klik pada Berbilang Elemen dengan Kelas yang Sama?. 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