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

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!