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 change,propertychange,input事件小议
Dec 20 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
Vue实现动态显示textarea剩余字数
May 22 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 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边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
预加载css或javascript的js代码
2010/04/23 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
Python with语句和过程抽取思想
2019/12/23 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
忠诚奉献演讲稿
2014/09/12 职场文书
放弃继承权公证书
2015/01/23 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书