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 相关文章推荐
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 Javascript
vue3.0中使用element的完整步骤
Mar 04 Vue.js
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后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
推荐下python/ironpython:从入门到精通
2007/10/02 Python
python生成指定尺寸缩略图的示例
2014/05/07 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
简单实现python数独游戏
2018/03/30 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
python3获取url文件大小示例代码
2019/09/18 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
车间组长岗位职责
2013/12/20 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
停车位租赁协议书
2014/09/24 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
任命书格式范文
2015/09/22 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js