Artikel ini menjelaskan solusi untuk fakta bahwa peristiwa yang terdaftar dalam JavaScript menggunakan untuk loop batch tidak dapat dengan benar mendapatkan nilai indeks. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Banyak teman mungkin mengalami masalah, yaitu ketika menggunakan loop untuk mendaftarkan fungsi pemrosesan acara, dan akhirnya mendapatkan nilai indeks dari elemen saat ini melalui fungsi pemrosesan peristiwa, itu akan gagal. Mari kita lihat contoh kode terlebih dahulu:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<meta name = "penulis" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<type style = "text/css">
Li {
Lebar: 240px;
meluap: tersembunyi;
teks-overflow: ellipsis;
SPACE PUTIH: Nowrap;
font-size: 12px;
Tinggi: 30px;
}
</tyle>
<type skrip = "Teks/JavaScript">
window.onload = function () {
var olis = document.geteLementsbyTagname ("li");
var show = document.geteLementById ("show");
untuk (indeks var = 0; index <olis.length; index ++) {
olis [index] .Onclick = function () {
show.innerhtml = index;
}
}
}
</script>
</head>
<body>
<Div id = "show"> </div>
<ul>
<li> Hanya dengan bekerja keras, mungkin ada hari esok yang lebih baik. </li>
<li> Berbagi dan saling membantu adalah kekuatan pendorong terbesar untuk kemajuan. </li>
<li> Setiap hari adalah baru, menghargainya. </li>
<li> Tidak ada seorang pun adalah seorang master sejak awal, hanya dengan bekerja keras Anda dapat tumbuh </li>
<li> Hanya saat ini yang berharga, detik berikutnya adalah ilusi </li>
</ul>
</body>
</html>
Dalam kode di atas, saat mengklik elemen LI, nilai pop-up selalu empat. Ide asli kami adalah mengklik elemen LI untuk menampilkan nilai indeks elemen LI saat ini di DIV. Mari kita analisis secara singkat alasan di bawah ini. Alasannya sangat sederhana. Setelah loop untuk dieksekusi, nilai indeks telah berubah menjadi empat, sehingga fenomena di atas terjadi.
Kode dimodifikasi sebagai berikut:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<meta name = "penulis" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<type style = "text/css">
Li {
Lebar: 240px;
meluap: tersembunyi;
teks-overflow: ellipsis;
SPACE PUTIH: Nowrap;
font-size: 12px;
Tinggi: 30px;
}
</tyle>
<type skrip = "Teks/JavaScript">
window.onload = function () {
var olis = document.geteLementsbyTagname ("li");
var show = document.geteLementById ("show");
untuk (indeks var = 0; index <olis.length; index ++) {
olis [index] ._ index = index;
olis [index] .Onclick = function () {
show.innerHtml = this._index;
}
}
}
</script>
</head>
<body>
<Div id = "show"> </div>
<ul>
<li> Hanya dengan bekerja keras, mungkin ada hari esok yang lebih baik. </li>
<li> Berbagi dan saling membantu adalah kekuatan pendorong terbesar untuk kemajuan. </li>
<li> Setiap hari adalah baru, menghargainya. </li>
<li> Tidak ada seorang pun adalah seorang master sejak awal, hanya dengan bekerja keras Anda dapat tumbuh </li>
<li> Hanya saat ini yang berharga, detik berikutnya adalah ilusi </li>
</ul>
</body>
</html>
Kode di atas menerapkan persyaratan kami, dan tentu saja, Anda juga dapat menggunakan penutupan. Kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<meta name = "penulis" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<type style = "text/css">
Li {
Lebar: 240px;
meluap: tersembunyi;
teks-overflow: ellipsis;
SPACE PUTIH: Nowrap;
font-size: 12px;
Tinggi: 30px;
}
</tyle>
<type skrip = "Teks/JavaScript">
window.onload = function () {
var olis = document.geteLementsbyTagname ("li");
var show = document.geteLementById ("show");
untuk (indeks var = 0; index <olis.length; index ++) {
(function (index) {
olis [index] .Onclick = function () {
show.innerhtml = index;
}
})(indeks)
}
}
</script>
</head>
<body>
<Div id = "show"> </div>
<ul>
<li> Hanya dengan bekerja keras, mungkin ada hari esok yang lebih baik. </li>
<li> Berbagi dan saling membantu adalah kekuatan pendorong terbesar untuk kemajuan. </li>
<li> Setiap hari adalah baru, menghargainya. </li>
<li> Tidak ada seorang pun adalah seorang master sejak awal, hanya dengan bekerja keras Anda dapat tumbuh </li>
<li> Hanya saat ini yang berharga, detik berikutnya adalah ilusi </li>
</ul>
</body>
</html>
Saya berharap deskripsi dalam artikel ini akan bermanfaat untuk pemrograman web semua orang berdasarkan JavaScript.