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 相关文章推荐
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
Vue实现双向数据绑定
May 03 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 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
新浪新闻小偷
2006/10/09 PHP
discuz7 phpMysql操作类
2009/06/21 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
python 文件操作删除某行的实例
2017/09/04 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
Django中的文件的上传的几种方式
2018/07/23 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
python批量修改xml属性的实现方式
2020/03/05 Python
python批量修改文件名的示例
2020/09/27 Python
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
通信研究生自荐信
2014/02/01 职场文书
授权委托书格式
2014/07/31 职场文书
作风转变年心得体会
2014/10/22 职场文书
中学生逃课检讨书
2015/02/17 职场文书
环卫处个人工作总结
2015/03/04 职场文书
pandas进行数据输入和输出的方法详解
2022/03/23 Python