简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah> hujung hadapan web> tutorial js> teks badan

JavaScript在for循环中绑定事件解决事件参数不同的情况_javascript技巧

WBOY
Lepaskan： 2016-05-16 17:03:14
asal
1027 orang telah melayarinya

有时候要对响应一堆相似的事件，但是每个事件的参数都不同，一开始还以为挺简单的，用个for循环不就得了，结果发现，额，都是使用了最后一个参数。。。

上网查资料！！！结果大神说用闭包解决

代码：

复制代码代码如下:

for(var i=0;ibtns[i].onclick=(function(i){
return function(){alert(i)}
})(i)
}

大概原因是直接用btns[i].onclick=function(){alert(i)}时，JavaScript引擎会先将for循环里的代码执行完，

当用户出发onclick事件时，JavaScript会寻找i，结果会找到运算完成之后的i，也就是10

但是用闭包处理的话，i会成为函数的局部变量
Label berkaitan：
for循环 Peristiwa yang mengikat
sumber：php.cn
Artikel sebelumnya：js给页面加style无效果的解决方法_javascript技巧 Artikel seterusnya：javascript在子页面中函数无法调试问题解决方法_javascript技巧
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bagaimana untuk menyenaraikan data dalam bahagian mengikut ID menggunakan gelung while dalam PHP? Saya mempunyai jadual mysql dengan lajur ini: series_id, series_color, product_name Dalam ...
daripada 2023-11-17 20:03:03
0
1
290
"Menggunakan arahan v-for untuk elemen tatasusunan dan pemusnahan atribut" Apabila menggunakan tatasusunan objek, adakah mungkin dalam gelung v-for untuk secara sere...
daripada 2023-11-05 17:37:54
0
1
216
Bagaimana untuk mengikat v-model kepada kaedah dalam Vue.js Saya sedang belajar vuejs(3). Saya mempunyai gelung ini:
daripada 2023-11-05 16:36:26
0
1
193
Vue.js 3 v-for menyebabkan masalah dengan fungsi mod Tailwind/Flowbite Saya cuba memanggil corak tailwind daripada jadual di mana baris dijana menggunakan v-for ...
daripada 2023-11-02 13:36:09
0
1
300
Kemas kini berbilang baris data menggunakan gelung PDO Saya mempunyai borang yang mengambil beberapa baris data, setiap item mempunyai kawasan te...
daripada 2023-10-24 09:38:58
0
2
296
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！