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 document.referrer 用法
Apr 30 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 Javascript
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
php session 预定义数组
2009/03/16 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
bootstrap中的 form表单属性role="form"的作用详解
2017/01/20 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
JavaScript如何操作css
2020/10/24 Javascript
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
高二英语教学反思
2014/01/19 职场文书
元旦联欢会主持词
2014/03/26 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
食品安全承诺书范文
2014/08/29 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书