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 相关文章推荐
Javascript与flash交互通信基础教程
Aug 07 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
微信小程序实现购物车功能
Nov 18 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
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
js hover 定时器(实例代码)
2013/11/12 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
js表单登陆验证示例
2016/10/19 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
浅谈JS和jQuery的区别
2019/03/27 jQuery
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
Python中Random和Math模块学习笔记
2015/05/18 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
Python元组常见操作示例
2019/02/19 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
python代码中怎么换行
2020/06/17 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
信息专业个人的自我评价
2013/12/27 职场文书
统计系教授推荐信
2014/02/28 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
Vue h函数的使用详解
2022/02/18 Vue.js
Docker安装MySql8并远程访问的实现
2022/07/07 Servers