JQuery中如何传递参数如click(),change()等具体实现
更新时间：2013年04月28日 17:08:47 作者：
有个需求让两个select中option相互转换,这个作业就是给几个按钮添加click()事件接下来为大家介绍下如何在click(),change()传递参数
因为要做这样一个作业,就是两个select中option相互转换,图如下:
这个作业就是给几个按钮添加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);
});
这个作业就是给几个按钮添加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);
});
相关文章
这篇文章主要介绍了jQuery 判断元素是否存在然后按需加载内容的实现代码,需要的朋友可以参考下2020-01-01
本文详细讲解了JQuery中this的指向，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
Jquery 结合jstree 动态生成一棵树，如果某一节点下目录超过500个，IE 会提示是否允许JS脚本运行，并且目录加载不全，大约只加载了300左右。2010-03-03
jquery的ajax如何使用ajaxSetup做全局请求拦截
在Web开发中,Ajax是一种常用的前后端数据交互技术,由于业务需求的复杂性和安全性的考虑,我们可能需要对Ajax请求进行全局拦截和处理,以便统一处理一些共性问题,如权限验证、错误处理等,本项目方案将介绍如何使用jQuery的Ajax实现全局请求拦截2023-11-11
编写插件的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，提高开发效率和方便后期维护。本文将详细介绍如何编写jQuery插件2017-03-03
详解JavaScript异步编程中jQuery的promise对象的作用
这篇文章主要介绍了JavaScript异步编程中jQuery的promise对象的作用,同时也谈到了js的Dojo框架中promise模式的实现,需要的朋友可以参考下2016-05-05
滑动菜单项效果,听起来就是很时尚的一个效果，不过实现起来有些麻烦，还好有本文的出现，可以帮助你解决这个困惑，热爱特效的你可不要错过了哈，好了话不多说切入正文2013-02-02
这篇文章主要介绍了jquery判断至少有一个checkbox被选中的方法,涉及jQuery操作checkbox控件的相关技巧,需要的朋友可以参考下2015-06-06
我改了下源码基本可以在ie7,ie8,ie9正常显示。以下是部分源码。发现用别人的东西出了问题很难搞啊。关键是那个ie啊。2015-05-05
Validation是jQuery的插件，提供的方法可以大大简化验证表单的工作，接下来为大家详细介绍下使用方法，感兴趣的各位可以参考下哈2013-03-03
最新评论