Beberapa hari yang lalu, ketika saya menulis kode JS front-end di tempat kerja, saya menemukan elemen traversal dan menambahkan acara klik ke dalamnya. Masalah inilah yang membuat saya menyesuaikannya sepanjang sore. Akhirnya, saya pulang dari pekerjaan dan mencari informasi secara online untuk mengetahui cara menyelesaikannya. (PS: Saya juga membaca konten program pemrosesan loop binding dalam edisi keempat "tutorial dasar jQuery". Saya kira saya tidak membacanya dengan cermat pada saat itu, jadi saya tidak mengingatnya.)
Jika The Great Master mengetahui situasi seperti ini, dia dapat menutup jendela dan menulis ini terutama untuk pemula seperti saya. Terima kasih!
Mari kita posting contoh yang salah terlebih dahulu untuk dilihat semua orang. (JQuery digunakan dalam contoh, silakan impor Perpustakaan JQuery)
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> loop binding handler </iteme>
<Script src = "js/jQuery-2.1.1.min.js"> </script>
<type skrip = "Teks/JavaScript">
$ (function () {
untuk (var i = 1; i <= 4; i ++) {
$ ("#btn"+i) .get (0) .Onclick = function () {
waspada (i);
}
}
});
</script>
</head>
<body>
<tombol id = "btn1"> tombol 1 </button>
<tombol id = "btn2"> Tombol 2 </button>
<tombol id = "btn3"> Tombol 3 </button>
<tombol id = "btn4"> Tombol 4 </button>
</body>
</html>
Setelah kode ini dijalankan, klik tombol dan data yang ditampilkan dalam peringatan pop-up ditampilkan. Saya selalu berpikir bahwa tombol 1 hingga 4, dan angka yang sesuai dalam peringatan juga 1 hingga 4. Jika Anda berpikir demikian, Anda salah.
Klik setiap tombol dan nomor 4 ditampilkan dalam peringatan. Saya tidak mengharapkannya!
Sekarang tulis beberapa solusi untuk referensi Anda!
Tipe pertama adalah menulis fungsi, dan mengembalikan fungsi dalam fungsi ini
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
$ (function () {
untuk (var i = 1; i <= 4; i ++) {
$ ("#btn"+i) .get (0) .onClick = btnclick (i);
}
});
var btnclick = function (value) {
return function () {
peringatan (nilai);
}
}
</script>
Tipe kedua: Gunakan ekspresi fungsi panggilan segera
(function (value) {
// blok kode
}) (i) // Ini untuk memanggil ekspresi fungsi segera
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
$ (function () {
untuk (var i = 1; i <= 4; i ++) {
$ ("#btn"+i) .get (0) .Onclick = (function (value) {
return function () {
peringatan (nilai);
} })(Saya);
}
});
</script>
Jenis ketiga: Setiap fungsi menggunakan jQuery
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
$ (function () {
$ .Each ([1,2,3,4], fungsi (indeks, nilai) {
$ ("#btn"+value) .get (0) .Onclick = function () {
peringatan (nilai);
}
});
});
</script>
Menggunakan tiga situasi di atas dapat menghindari situasi itu di awal.
di mana dapatkan (0) mengacu pada mengubah objek jQuery menjadi objek DOM.
Di atas adalah pemahaman pribadi saya tentang pawang pengikat loop di penutupan JS. Saya akan membaginya dengan Anda. Saya berharap ini akan membantu teman -teman saya.