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实现的一个include函数
Jul 21 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 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编写PDF文档生成器
2006/10/09 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
node.js require() 源码解读
2015/12/13 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
Python中的进程分支fork和exec详解
2015/04/11 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
运动会解说词50字
2014/01/18 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
农村文化活动总结
2014/08/28 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
紧急通知
2015/04/17 职场文书
驳回起诉裁定书
2015/05/19 职场文书
入党培养人考察意见
2015/06/08 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
TV动画《间谍过家家》公开PV
2022/03/20 日漫