JQuery中如何传递参数如click(),change()等具体实现


Posted in Javascript onApril 28, 2013

因为要做这样一个作业,就是两个select中option相互转换,图如下:
JQuery中如何传递参数如click(),change()等具体实现
这个作业就是给几个按钮添加click()事件,一般的用法是这样的:

$("#but_one").click(function(){ 
$("#select1 option:selected").appendTo($("#select2")); 
});

然后我查找了官方文档,对click的说明是这样的,后来我还是没有百度到答案,
我考虑到代码的重用性,想直接传"select1"和"select2"字符串进去,我就使用下面的方法:
$("#but_one").click(select("select1","select2")); 
//提高代码重用性,根据函数变更 
function select(s1,s2){ $(("#"+s1+"option:selected")).appendTo($("#"+s2)); 
}

后来发现jQuery中,如果使用函数名加括号,就是执行,所以我绑定事件的时候就执行了,如select()就执行了,后来百度了一下也没有找到答案,就去google了一下,乖乖,还真找到了,在stackoverflow论坛上面找到了答案.然后我的代码就变成了这样:
$(function(){ 
var obj1 = {s:"select1",s2:"select2"}; 
var obj2 = {s:"select2",s2:"select1"}; 
$("#1").click(obj1,select); 
$("#2").click(obj1,select2); 
$("#3").click(obj2,select); 
$("#4").click(obj2,select2); 
function select(event){ 
console.debug(event.data.s); 
$(("#"+event.data.s+" option:selected")).appendTo($("#"+event.data.s2)); 
} 
function select2(event){ 
$("#"+event.data.s+" option").appendTo($("#"+event.data.s2)); 
} 
});

click(data,fn)中的data其实是json对象,取的时候,只能通过当前的事件源来取,data是默认放在event中的,所以这里的data是eventdata,引用的时候也使用event.data.name,也就是说JQuery中的所有触发时间的方法,需要传递参数都可以通过eventdata对象来传递参数:
这里分享下老外的代码 :
$("select#test").change({msg: "ok"}, function(event) { 
myHandler(event.data.msg); 
});
Javascript 相关文章推荐
jQuery MD5加密实现代码
Mar 15 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 #Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 #Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 #Javascript
js自动下载文件到本地的实现代码
Apr 28 #Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 #Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 #Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 #Javascript
You might like
Zerg兵种介绍
2020/03/14 星际争霸
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
vue中轮训器的使用
2019/01/27 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
python实现简单http服务器功能
2018/09/17 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
python安装gdal的两种方法
2019/10/29 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
django修改models重建数据库的操作
2020/03/31 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
迪拜航空官方网站:flydubai
2017/04/20 全球购物
国税会议欢迎词
2014/01/16 职场文书
政治思想表现评语
2014/05/04 职场文书
药剂专业求职信
2014/06/20 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
大学生求职信怎么写
2015/03/19 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python