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 相关文章推荐
js中reverse函数的用法详解
Dec 26 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
js实现密码强度检验
Jan 15 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 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
第十五节--Zend引擎的发展
2006/11/16 PHP
一个PHP分页类的代码
2011/05/18 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
js数据类型检测总结
2018/08/05 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
助人为乐表扬信范文
2014/01/14 职场文书
高二英语教学反思
2014/01/19 职场文书
电大本科自我鉴定
2014/02/05 职场文书
化工专业求职信
2014/07/01 职场文书
毕业设计致谢词
2015/05/14 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
Python中字符串对象语法分享
2022/02/24 Python