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 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
简单理解vue中Props属性
Oct 27 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 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学习笔记之 函数声明
2011/06/09 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
详解Python中的strftime()方法的使用
2015/05/22 Python
Django中处理出错页面的方法
2015/07/15 Python
python二分查找算法的递归实现方法
2016/05/12 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
python绘制雪景图
2019/12/16 Python
python读取xml文件方法解析
2020/08/04 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
大学生毕业求职的自我评价
2013/09/29 职场文书
护士专业推荐信
2013/11/02 职场文书
优秀员工自荐书
2013/12/19 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
简历自我评价优缺点
2015/03/11 职场文书
优秀英文求职信范文
2015/03/19 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫