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 相关文章推荐
JavaScript库 开发规则
Jan 31 Javascript
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
JavaScript 格式字符串的应用
Mar 29 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
node.js中的fs.chownSync方法使用说明
Dec 16 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
小程序如何构建骨架屏
May 29 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 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 正则表达式的学习探讨
2013/06/06 PHP
摘自启点的main.js
2008/04/20 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
bootstrap响应式表格实例详解
2017/05/15 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
python实现zabbix发送短信脚本
2018/09/17 Python
python常用函数与用法示例
2019/07/02 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
python实现倒计时小工具
2019/07/29 Python
简单分析python的类变量、实例变量
2019/08/23 Python
Python pip配置国内源的方法
2020/02/14 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
Python如何生成xml文件
2020/06/04 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
网络编辑求职信
2014/04/30 职场文书
个性婚礼策划方案
2014/05/17 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
烈士陵园观后感
2015/06/08 职场文书
详解nginx进程锁的实现
2021/06/14 Servers