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可突破windows弹退效果代码
Aug 09 Javascript
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 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防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
js中this用法实例详解
2015/05/05 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
详解python pandas 分组统计的方法
2019/07/30 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
Shein英国:女性时尚网上商店
2019/04/10 全球购物
总裁岗位职责
2013/12/04 职场文书
上课迟到检讨书
2014/01/19 职场文书
研究生毕业鉴定
2014/01/29 职场文书
公司门卫管理制度
2014/02/01 职场文书
函授药学自我鉴定
2014/02/07 职场文书
向领导表决心的话
2014/03/11 职场文书
爱情寄语大全
2014/04/09 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
五年级作文之想象作文
2019/10/30 职场文书
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js
Oracle中DBLink的详细介绍
2022/04/29 Oracle