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的eval()中使用函数的进一步讨论
Jul 26 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 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实现数字补零功能的2个函数介绍
2014/05/12 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
详细介绍Python语言中的按位运算符
2013/11/26 Python
python根据距离和时长计算配速示例
2014/02/16 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Python 通配符删除文件的实例
2018/04/24 Python
pymongo中group by的操作方法教程
2019/03/22 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
小学教师听课制度
2014/02/01 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
小学领导班子对照材料
2014/08/23 职场文书
任命书标准格式
2015/03/02 职场文书
学校节水倡议书
2015/04/29 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
2016情人节宣传语
2015/07/14 职场文书
思想工作总结范文
2015/08/12 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
PHP策略模式写法
2021/04/01 PHP
matlab xlabel位置的设置方式
2021/05/21 Python
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL