JQuery中如何傳遞參數(shù)如click(),change()等具體實(shí)現(xiàn)

更新時(shí)間：2013年04月28日 17:08:47 作者：

有個(gè)需求讓兩個(gè)select中option相互轉(zhuǎn)換,這個(gè)作業(yè)就是給幾個(gè)按鈕添加click()事件接下來為大家介紹下如何在click(),change()傳遞參數(shù)

因?yàn)橐鲞@樣一個(gè)作業(yè),就是兩個(gè)select中option相互轉(zhuǎn)換,圖如下:

這個(gè)作業(yè)就是給幾個(gè)按鈕添加click()事件,一般的用法是這樣的:

 
$("#but_one").click(function(){ 
$("#select1 option:selected").appendTo($("#select2")); 
}); 

然后我查找了官方文檔,對(duì)click的說明是這樣的,后來我還是沒有百度到答案,
我考慮到代碼的重用性,想直接傳"select1"和"select2"字符串進(jìn)去,我就使用下面的方法:

復(fù)制代碼代碼如下:

 
$("#but_one").click(select("select1","select2")); 
//提高代碼重用性,根據(jù)函數(shù)變更 
function select(s1,s2){ $(("#"+s1+"option:selected")).appendTo($("#"+s2)); 
} 

后來發(fā)現(xiàn)jQuery中,如果使用函數(shù)名加括號(hào),就是執(zhí)行,所以我綁定事件的時(shí)候就執(zhí)行了,如select()就執(zhí)行了,后來百度了一下也沒有找到答案,就去google了一下,乖乖,還真找到了,在stackoverflow論壇上面找到了答案.然后我的代碼就變成了這樣:

復(fù)制代碼代碼如下:

 
$(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其實(shí)是json對(duì)象,取的時(shí)候,只能通過當(dāng)前的事件源來取,data是默認(rèn)放在event中的,所以這里的data是eventdata,引用的時(shí)候也使用event.data.name,也就是說JQuery中的所有觸發(fā)時(shí)間的方法,需要傳遞參數(shù)都可以通過eventdata對(duì)象來傳遞參數(shù):
這里分享下老外的代碼 :

復(fù)制代碼代碼如下:

 
$("select#test").change({msg: "ok"}, function(event) { 
myHandler(event.data.msg); 
}); 

您可能感興趣的文章:

相關(guān)文章

jQuery 判斷元素是否存在然后按需加載內(nèi)容的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery 判斷元素是否存在然后按需加載內(nèi)容的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2020-01-01
JQuery中this的指向詳解
本文詳細(xì)講解了JQuery中this的指向，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-05-05
JQery jstree 大數(shù)據(jù)量問題解決方法
Jquery 結(jié)合jstree 動(dòng)態(tài)生成一棵樹，如果某一節(jié)點(diǎn)下目錄超過500個(gè)，IE 會(huì)提示是否允許JS腳本運(yùn)行，并且目錄加載不全，大約只加載了300左右。
2010-03-03
jquery的ajax如何使用ajaxSetup做全局請(qǐng)求攔截
在Web開發(fā)中,Ajax是一種常用的前后端數(shù)據(jù)交互技術(shù),由于業(yè)務(wù)需求的復(fù)雜性和安全性的考慮,我們可能需要對(duì)Ajax請(qǐng)求進(jìn)行全局?jǐn)r截和處理,以便統(tǒng)一處理一些共性問題,如權(quán)限驗(yàn)證、錯(cuò)誤處理等,本項(xiàng)目方案將介紹如何使用jQuery的Ajax實(shí)現(xiàn)全局請(qǐng)求攔截
2023-11-11
如何編寫jquery插件
編寫插件的目的是給已經(jīng)有的一系列方法或函數(shù)做一個(gè)封裝，以便在其他地方重復(fù)使用，提高開發(fā)效率和方便后期維護(hù)。本文將詳細(xì)介紹如何編寫jQuery插件
2017-03-03
詳解JavaScript異步編程中jQuery的promise對(duì)象的作用
這篇文章主要介紹了JavaScript異步編程中jQuery的promise對(duì)象的作用,同時(shí)也談到了js的Dojo框架中promise模式的實(shí)現(xiàn),需要的朋友可以參考下
2016-05-05
利用JQuery動(dòng)畫制作滑動(dòng)菜單項(xiàng)效果實(shí)現(xiàn)步驟及代碼
滑動(dòng)菜單項(xiàng)效果,聽起來就是很時(shí)尚的一個(gè)效果，不過實(shí)現(xiàn)起來有些麻煩，還好有本文的出現(xiàn)，可以幫助你解決這個(gè)困惑，熱愛特效的你可不要錯(cuò)過了哈，好了話不多說切入正文
2013-02-02
jquery判斷至少有一個(gè)checkbox被選中的方法
這篇文章主要介紹了jquery判斷至少有一個(gè)checkbox被選中的方法,涉及jQuery操作checkbox控件的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
jQuery插件jPaginate實(shí)現(xiàn)無刷新分頁
我改了下源碼基本可以在ie7,ie8,ie9正常顯示。以下是部分源碼。發(fā)現(xiàn)用別人的東西出了問題很難搞啊。關(guān)鍵是那個(gè)ie啊。
2015-05-05
使用jQuery validate 驗(yàn)證注冊(cè)表單實(shí)例演示
Validation是jQuery的插件，提供的方法可以大大簡化驗(yàn)證表單的工作，接下來為大家詳細(xì)介紹下使用方法，感興趣的各位可以參考下哈
2013-03-03