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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
vue配置接口域名方法总结
May 12 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 无限级缓存的类的扩展
2009/03/16 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
js实现圆盘记速表
2015/08/03 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python mysqldb连接数据库
2009/03/16 Python
python使用super()出现错误解决办法
2017/08/14 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
《莫高窟》教学反思
2014/02/25 职场文书
四年级评语大全
2014/04/21 职场文书
2014年教研组工作总结
2014/11/26 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书