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实现的支持lrc歌词的播放器
May 17 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
用console.table()调试javascript
Sep 04 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 Javascript
微信小程序组件生命周期的踩坑记录
Mar 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 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
QML使用Python的函数过程解析
2019/09/26 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
Python流程控制语句的深入讲解
2020/06/15 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
电厂厂长岗位职责
2014/01/02 职场文书
高二政治教学反思
2014/02/01 职场文书
颁奖典礼主持词
2014/03/25 职场文书
党支部培养考察意见
2015/06/02 职场文书
初中毕业感言300字
2015/07/31 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python