Bagaimana untuk Mengelakkan Rujukan Pembolehubah Bertindih dalam Pengendali Acara JavaScript Dicipta dengan Gelung?

Cara Mengelakkan Rujukan Pembolehubah Bertindih Semasa Menjana Pengendali Acara dengan Gelung dalam JavaScript

Dalam JavaScript, apabila mencipta pengendali acara dengan gelung, adalah penting untuk menangani isu rujukan boleh ubah. Soalan asal menunjukkan bagaimana gelung yang memperuntukkan peristiwa onclick kepada berbilang elemen boleh mengakibatkan tingkah laku yang tidak dijangka disebabkan oleh akses pembolehubah yang dikongsi.

Isu ini timbul apabila semua pengendali acara merujuk pembolehubah yang sama, yang dikemas kini dengan setiap lelaran gelung. Akibatnya, hanya pengendali peristiwa terakhir yang mengekalkan nilai akhir pembolehubah.

Untuk menyelesaikan masalah ini, penyelesaian melibatkan penentuan fungsi berasingan untuk setiap pengendali peristiwa, dengan pembolehubah sebagai parameter. Ini memastikan bahawa setiap pengendali mempunyai salinan pembolehubahnya sendiri, mengelakkan masalah rujukan bertindih.

Berikut ialah kod yang diperbetulkan:

// Define a function that takes the variable as a parameter
function handleElement(i) {
    document.getElementById("b" + i).onclick = function () {
        alert(i);  // Each handler has its own i
    };
}

// Iterate through the elements and call the function
for (i = 1; i < 11; i++) {
    handleElement(i);
}

Dengan menggunakan pendekatan ini, setiap pengendali acara mempunyai kodnya sendiri rujukan pembolehubah khusus, memastikan ia berkelakuan seperti yang diharapkan dan memaklumkan nilai yang betul berdasarkan elemen yang sepadan dengannya.

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Rujukan Pembolehubah Bertindih dalam Pengendali Acara JavaScript Dicipta dengan Gelung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!