首页 web前端 js教程 JQuery中如何传递参数如click(),change()等具体实现_jquery

JQuery中如何传递参数如click(),change()等具体实现_jquery

May 16, 2016 pm 05:34 PM
change click 传递参数

因为要做这样一个作业,就是两个select中option相互转换,图如下:
JQuery中如何传递参数如click(),change()等具体实现_jquery
这个作业就是给几个按钮添加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);
});
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
2 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Python中函数参数传递方法*args, **kwargs,还有其他 Python中函数参数传递方法*args, **kwargs,还有其他 Apr 13, 2023 am 09:58 AM

本文将讨论Python的函数参数。我们将了解args和**kwargs,/和的都是什么,虽然这个问题是一个基本的python问题,但是在我们写代码时会经常遇到,比如timm中就大量使用了这样的参数传递方式。定义和传递参数parameters 和arguments 之间的区别是什么?许多人交替使用这些术语,但它们是有区别的:Parameters 是函数定义中定义的名称Arguments是传递给函数的值红色的是parameters , 绿色的是arguments。传递参数的两种方式我们可以按位置和关

Vue中如何使用v-on:click监听鼠标点击事件 Vue中如何使用v-on:click监听鼠标点击事件 Jun 11, 2023 am 10:12 AM

Vue是一款流行的前端框架,它帮助开发者更方便、快捷地构建网站和应用程序。其中,v-on:click是Vue中用于监听鼠标点击事件的指令。下面就来介绍一下如何在Vue中使用v-on:click来监听鼠标点击事件。首先,在Vue中使用v-on:click可以通过两种方式来定义鼠标点击事件:直接在模板中使用和在Vue实例中使用。下面我们来分别介绍这两种方式。直接

使用 func_get_args() 函数传递可变数量参数 使用 func_get_args() 函数传递可变数量参数 Jun 27, 2023 pm 12:31 PM

在PHP中,有时候我们需要编写能够处理可变数量参数的函数。传统的方法是使用数组或者分别传递每个参数。但是,PHP还提供了一个更简便的方式,那就是使用func_get_args()函数。func_get_args()函数能够获取被调用函数中所有的参数,并将它们存储在一个数组中。这个数组可以用来处理任何数量的参数。下面我们来演示一下如何使用func

Vue中如何使用v-on:click.self实现只有自己触发事件 Vue中如何使用v-on:click.self实现只有自己触发事件 Jun 11, 2023 pm 01:57 PM

Vue是一款流行的前端框架,具有简洁、高效、易维护等特点,深受开发者喜爱。在Vue中,我们经常需要为组件或元素绑定事件来实现特定的交互效果,但有时候我们希望事件只由自身触发,不受其他因素干扰。那么怎样在Vue中使用v-on:click.self实现只有自己触发事件呢?本文将为您详细解答。首先,我们需要了解v-on指令的基本用法。v-on指令用于绑定事件,常用

Vue应用中遇到"click"事件绑定无效怎么办? Vue应用中遇到"click"事件绑定无效怎么办? Jun 24, 2023 pm 03:51 PM

Vue是一款流行的JavaScript框架,用于构建现代的Web应用程序。在Vue中,我们通常使用指令来实现DOM元素的操作。其中,"click"事件是常用的一个指令之一,然而,在Vue应用程序中,我们经常会遇到"click"事件绑定无效的情况。本文将介绍解决这一问题的方法。检查元素是否存在第一步是确认要绑定"click"事件的元素是否存在。如果元素不存在,

查询另一个JSP页面传递参数的方法(jQuery) 查询另一个JSP页面传递参数的方法(jQuery) Feb 27, 2024 am 10:45 AM

标题:使用jQuery在JSP页面中传递参数的方法在开发Web应用程序时,经常会遇到需要在一个JSP页面中传递参数到另一个JSP页面的情况。这时,可以使用jQuery来方便地实现参数传递。本文将介绍如何在JSP页面中使用jQuery来传递参数,并提供具体的代码示例。1.使用jQuery传递参数的步骤使用jQuery在JSP页面中传递参数,一般需要以下步骤:

Vue中如何使用v-on:click.capture实现捕获阶段的事件处理 Vue中如何使用v-on:click.capture实现捕获阶段的事件处理 Jun 11, 2023 am 10:55 AM

Vue是一款流行的JavaScript框架,它为开发者提供了各种各样的指令和方法,使得开发者能够更加高效地处理Web开发中遇到的各种问题。其中,v-on指令可以用来绑定各种事件的处理程序,而v-on:click.capture则表示在处理click事件时采用捕获阶段。在JavaScript中,事件传播的过程分为三个阶段:捕获阶段、目标阶段和冒泡阶段。在捕获阶

Vue中如何使用v-on:click.stop实现事件冒泡的停止 Vue中如何使用v-on:click.stop实现事件冒泡的停止 Jun 11, 2023 pm 12:00 PM

Vue是前端界非常流行的一种JavaScript框架,它可以帮助我们构建高效、灵活且易于维护的Web应用程序。在Vue中,事件冒泡是一个非常常见的问题,因为在复杂的应用程序中,多个组件可能会共用同一个DOM元素。在这种情况下,使用v-on:click.stop指令可以非常方便地实现事件冒泡的停止。一、什么是事件冒泡?事件冒泡是指当一个DOM元素上的事件被触发

See all articles