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 相关文章推荐
让table变成exls的示例代码
Mar 24 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
vue-cli在 history模式下的配置详解
Nov 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 连接mysql连接被重置的解决方法
2011/02/15 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
如何打开php的gd2库
2017/02/09 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
pygame实现五子棋游戏
2019/10/29 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
2014端午节活动策划方案
2014/01/27 职场文书
企业消防安全制度
2014/02/02 职场文书
幼师求职自荐信
2015/03/26 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android
MySQL批量更新不同表中的数据
2022/05/11 MySQL