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 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
react的hooks的用法详解
Oct 12 Javascript
原生js实现俄罗斯方块
Oct 20 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
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php discuz 主题表和回帖表的设计
2009/03/13 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
Python实现简单http服务器
2018/04/12 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
python 通过exifread读取照片信息
2020/12/24 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
勤俭节约倡议书
2014/04/14 职场文书
希特勒的演讲稿
2014/05/23 职场文书
局火灾防控工作方案
2014/05/25 职场文书
护校行动方案
2014/05/31 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
清洁工岗位职责
2015/02/13 职场文书
三行辞职书范文
2015/02/26 职场文书
西游记读书笔记
2015/06/25 职场文书
高中政治教师教学反思
2016/02/23 职场文书
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电