js和jquery批量绑定事件传参数一(新猪猪原创)


Posted in Javascript onJune 23, 2010
<input type="button" value="btn1" id="btn1"/> 
<input type="button" value="btn2" id="btn2"/> 
<input type="button" value="btn3" id="btn3"/> 
<script type="text/javascript"> 
for(var i=1;i<=3;i++){ 
document.getElementById('btn' + i).onclick = (function(j){ 
return function(){ 
alert(j); 
} 
})(i); 
} 
</script>

下面是结合了jquery的代码,原理都是一样的
在使用javascript批量绑定页面上的元素并传递递增编号时,需要如下编写:
<html>部分的代码:
<input type="button" id="btn1" value="按钮1" /> 
<input type="button" id="btn2" value="按钮2" /> 
<input type="button" id="btn3" value="按钮3" /> 
<input type="button" id="btn4" value="按钮4" /> 
<input type="button" id="btn5" value="按钮5" /> 
<input type="button" id="btn6" value="按钮6" /> 
<input type="button" id="btn7" value="按钮7" />

<js>部分的代码:
$(function () { 
var i; 
for (i = 1; i <= 7; i++) { 
$("#btn" + i).bind("click", { id: i }, dis); 
} 
}); function dis(evt) { 
alert(evt.data.id); 
}
Javascript 相关文章推荐
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 #Javascript
jquery ajax 同步异步的执行示例代码
Jun 23 #Javascript
jquery tab插件制作实现代码
Jun 22 #Javascript
jquery多浏览器捕捉回车事件代码
Jun 22 #Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 #Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 #Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 #Javascript
You might like
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
再论Javascript的类继承
2011/03/05 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
Python程序设计入门(3)数组的使用
2014/06/16 Python
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Python3 批量扫描端口的例子
2019/07/25 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
PyTorch中的C++扩展实现
2020/04/02 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
如何处理简单的PHP错误
2015/10/14 面试题
super关键字的用法
2012/04/10 面试题
厨房管理计划书
2014/04/27 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
Python进程池与进程锁之语法学习
2022/04/11 Python
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android
Tomcat弱口令复现及利用
2022/05/06 Servers
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技