浅谈JS闭包中的循环绑定处理程序

前端技术 2023/09/08 JavaScript

前几天工作中写前端js代码时，遇到了遍历元素给它添加单击事件。就是这个问题让我整整调了一个下午。最后还是下班回家，上网查资料才知道怎么解决的。 （PS：之前也在《jQuery基础教程》第四版中看过讲循环绑定处理程序的内容，当时估计也没怎么用心看，所以没记起来。）
　　大神要是知道这类情况，可以关掉窗口，写这些主要是给像我一样的小白看的。谢谢！

　　先贴上错误的例子让大家看看。（例子里面用到jQuery，请导入jQuery库）

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
　　<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
　　<title>循环绑定处理程序</title>
　　<script src=\"js/jquery-2.1.1.min.js\"></script>
　　<script type=\"text/javascript\">
　　　　$(function(){
　　　　　　for(var i=1;i<=4;i++){
　　　　　　　　$(\"#btn\"+i).get(0).onclick=function(){
　　　　　　　　　　alert(i);
　　　　　　　　}
　　　　　　}
　　　　});
　　</script>
</head>
<body>
　　<button id=\"btn1\">按钮1</button>
　　<button id=\"btn2\">按钮2</button>
　　<button id=\"btn3\">按钮3</button>
　　<button id=\"btn4\">按钮4</button>
</body>
</html>

 
　　这段代码运行之后，点击按钮，弹出的alert中显示数据几呢，我之前一直认为按钮1到按钮4，对应的alert中的数字也是1到4。要是你也这样想，那就错了。
　　点击每个按钮，alert中都是显示数字4，没想到吧！
　　现在写几种解决方案，共大家参考 ！
　　第一种、编写一个function，在这个function中返回一个函数

复制代码 代码如下:

<script type=\"text/javascript\">
　　$(function(){
　　　　for(var i=1;i<=4;i++){
　　　　　　$(\"#btn\"+i).get(0).onclick=btnClick(i);

　　　　}
　　});
　　var btnClick=function(value){
　　　　return function(){
　　　　　　alert(value);
　　　　}
　　}
</script>

本文地址：https://www.stayed.cn/item/21212

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案