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 相关文章推荐
Jquery中增加参数与Json转换代码
Nov 20 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
angular之ng-template模板加载
Nov 09 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
PHP学习之正则表达式
2011/04/17 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
python实现最长公共子序列
2018/05/22 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
缴纳养老保险的证明
2014/01/10 职场文书
《长城》教学反思
2014/02/14 职场文书
公司门卫岗位职责
2014/03/15 职场文书
考博专家推荐信
2014/05/10 职场文书
会计专业自荐信
2014/06/03 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
Python日志模块logging用法
2022/06/05 Python