Bagaimana untuk Mengakses Pembolehubah Luaran dengan Betul dalam Gelung Menggunakan Penutupan JavaScript dan jQuery?

Mengakses Pembolehubah Luaran dalam Gelung melalui Penutupan JavaScript

Dalam JavaScript, memanipulasi pembolehubah dalam penutupan dan gelung boleh menimbulkan cabaran. Artikel ini menangani isu biasa apabila mengakses pembolehubah dalam gelung menghasilkan nilai yang tidak dijangka disebabkan oleh skop pembolehubah.

Pertimbangkan coretan kod berikut:

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    // ...
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
}</code>

Apabila mengklik mana-mana butang yang dibuat oleh gelung, fungsi amaran sentiasa memaparkan ID item terakhir dalam tatasusunan. Ini berlaku kerana item pembolehubah berubah dengan setiap lelaran dan apabila peristiwa klik dicetuskan, ia merujuk kepada elemen terakhir.

Untuk menyelesaikan isu ini, kami boleh menggunakan penutupan. Penutupan ialah fungsi yang mengembalikan fungsi lain dan sering digunakan untuk mencipta skop setempat untuk pembolehubah. Dengan mengubah suai kod, kami boleh merangkum item pembolehubah dalam penutupan:

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    // ...
    $("#showcasebutton_" + item.id).click(
        (function(item) {
             return function() {
                alert(item.id);
                self.switchto(item.id);
             };
        })(item)
    );
}</code>

Dalam fungsi dalaman, item pembolehubah ditangkap sebagai parameter, dengan berkesan mewujudkan skop setempat. Ini memastikan bahawa apabila peristiwa klik dicetuskan, ia akan mengakses objek item yang betul yang dikaitkan dengan butang itu.

Sebagai alternatif, anda boleh memanfaatkan fungsi penolong $.each() jQuery, yang memudahkan proses lelaran dan skop pembolehubah :

<code class="javascript">$.each(this.items,function(i, item) {
    // ...
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
});</code>

Dalam kes ini, item dihantar sebagai parameter kepada fungsi, memastikan skop yang betul dan menyelesaikan isu awal.

Atas ialah kandungan terperinci Bagaimana untuk Mengakses Pembolehubah Luaran dengan Betul dalam Gelung Menggunakan Penutupan JavaScript dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!