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)去,我就使用下面的方法:
$("#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論壇上面找到了答案.然后我的代碼就變成了這樣:
$(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ù):
這里分享下老外的代碼 :
$("select#test").change({msg: "ok"}, function(event) {
myHandler(event.data.msg);
});

這個(gè)作業(yè)就是給幾個(gè)按鈕添加click()事件,一般的用法是這樣的:
復(fù)制代碼 代碼如下:
$("#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);
});
您可能感興趣的文章:
- 傳遞參數(shù)的標(biāo)準(zhǔn)方法(jQuery.ajax)
- jquery ajax 向后臺(tái)傳遞數(shù)組參數(shù)示例
- Jquery中ajax方法data參數(shù)的用法小結(jié)
- 為jquery的ajaxfileupload增加附加參數(shù)的方法
- javascript/jquery獲取地址欄url參數(shù)的方法
- jquery datepicker參數(shù)介紹和示例
- jQuery學(xué)習(xí)筆記之jQuery.fn.init()的參數(shù)分析
- Jquery之Bind方法參數(shù)傳遞與接收的三種方法
- 通過jquery 獲取URL參數(shù)并進(jìn)行轉(zhuǎn)碼
- jQuery on方法傳遞參數(shù)示例
- jQuery()方法的第二個(gè)參數(shù)詳解
相關(guān)文章
html+jQuery實(shí)現(xiàn)拖動(dòng)滑塊圖片拼圖驗(yàn)證碼插件【移動(dòng)端適用】
這篇文章主要介紹了html+jQuery實(shí)現(xiàn)拖動(dòng)滑塊圖片拼圖驗(yàn)證碼插件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09JS 遍歷 json 和 JQuery 遍歷json操作完整示例
這篇文章主要介紹了JS 遍歷 json 和 JQuery 遍歷json操作,結(jié)合完整實(shí)例形式詳細(xì)分析了JavaScript與jQuery遍歷json格式數(shù)據(jù)的簡(jiǎn)單實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-11-11jQuery插件echarts去掉垂直網(wǎng)格線用法示例
這篇文章主要介紹了jQuery插件echarts去掉垂直網(wǎng)格線用法,結(jié)合實(shí)例形式對(duì)比分析了jQuery圖標(biāo)插件echarts針對(duì)垂直網(wǎng)格線的相關(guān)設(shè)置操作技巧,需要的朋友可以參考下2017-03-03jQuery動(dòng)態(tài)添加可拖動(dòng)元素完整實(shí)例(附demo源碼下載)
這篇文章主要介紹了jQuery動(dòng)態(tài)添加可拖動(dòng)元素的方法,可實(shí)現(xiàn)簡(jiǎn)單的點(diǎn)擊添加元素,并且添加的元素可進(jìn)行拖動(dòng)操作.涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2016-06-06jquery實(shí)現(xiàn)標(biāo)簽上移、下移、置頂
這篇文章主要介紹了jquery實(shí)現(xiàn)標(biāo)簽上移、下移、置頂?shù)南嚓P(guān)資料,并附上示例,非常實(shí)用,需要的朋友可以參考下2015-04-04jquery.blockUI.js上傳滾動(dòng)等待效果實(shí)現(xiàn)思路及代碼
上傳滾動(dòng)等待效果想必大家在很多場(chǎng)合都有見過吧,本文將介紹jquery.blockUI.js實(shí)現(xiàn)上傳滾動(dòng)等待效果,感興趣的你可不要錯(cuò)過了哈,希望可以幫助到你2013-03-03JQuery實(shí)現(xiàn)DIV其他動(dòng)畫效果的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄狫Query實(shí)現(xiàn)DIV其他動(dòng)畫效果的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09