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 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
关于JS字符串函数String.replace()
Apr 07 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
Moment的feature导致线上bug解决分析
Sep 23 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 获取远程网页内容的函数
2009/09/08 PHP
php二维数组排序详解
2013/11/06 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
php实现算术验证码功能
2018/12/05 PHP
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
在Python下尝试多线程编程
2015/04/28 Python
python绘图方法实例入门
2015/05/19 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
python批量修改ssh密码的实现
2019/08/08 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
Python内置类型性能分析过程实例
2020/01/29 Python
法律工作求职自荐信
2013/10/31 职场文书
管理科学大学生求职信
2013/11/13 职场文书
民事授权委托书范文
2014/08/02 职场文书
学生偷窃检讨书
2014/09/25 职场文书
大四学生个人总结
2015/02/15 职场文书