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计算时间差的示例代码
Mar 19 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
JS实现canvas简单小画板功能
Jun 23 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
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
c#中的实现php中的preg_replace
2009/12/21 PHP
php 验证码实例代码
2010/06/01 PHP
php的ajax简单实例
2014/02/27 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
JQuery的html(data)方法与<script>脚本块的解决方法
2010/03/09 Javascript
jquery foreach使用示例
2013/09/12 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
three.js中文文档学习之创建场景
2017/11/20 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
pip命令无法使用的解决方法
2018/06/12 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
Java面试题及答案
2012/09/08 面试题
2014高中生入党思想汇报范文
2014/09/13 职场文书
2014年司机工作总结
2014/11/21 职场文书
岳麓书院导游词
2015/02/03 职场文书
普通员工辞职信范文
2015/05/12 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
技术转让协议书
2016/03/19 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
7个关于Python的经典基础案例
2021/11/07 Python
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技