我可以使用變量以某種方式與.on Jquery

我有一個div內的3個按鈕，我想添加相同的點擊監聽器的所有人。我對這些按鈕有一些操作，所以我首先將它們作爲變量添加到函數的乞求中，然後我想使用這些變量添加on監聽器。有什麼辦法嗎？的HTML看起來像這樣：我可以使用變量以某種方式與.on Jquery

<div class="wrapper"> 
    <button class="a"></button> 
    <button class="b"></button> 
    <button class="c"></button> 
</div>

的JS：

var $wrapper = $('.wrapper'), 
    $aBtn = $wrapper.find('.a'), 
    $bBtn = $wrapper.find('.b'), 
    $cBtn = $wrapper.find('.c'); 

//The working but less neat solution 
$('.wrapper .a, .wrapper .b, .wrapper .c').on('click', func); 

//What I want 
($aBtn, $bBtn, $cBtn).on('click', func);

來源

2017-03-07 LilacEilim

您可以使用.add() // Ref link

var $wrapper = $('.wrapper'), 
 
    $aBtn = $wrapper.find('.a'), 
 
    $bBtn = $wrapper.find('.b'), 
 
    $cBtn = $wrapper.find('.c'); 
 

 
//What I want 
 
$($aBtn).add($bBtn).add($cBtn).on('click', func); 
 

 
function func(){alert($(this).attr("class"))}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <button class="a">a</button> 
 
    <button class="b">b</button> 
 
    <button class="c">c</button> 
 
</div>

來源

2017-03-07 07:44:55

注意：'add'接受多個參數，開始時不需要'$（）'（'add'返回一個新對象，它不會修改它調用的內容）：'$ aBtn.add（ $ bBtn）.add（$ cBtn）.on（...）' –

非常真實，只是一個老習慣:) –

使用添加功能

$aBtn.add($bBtn,$cBtn).on('click', func);

來源

2017-03-07 07:42:32

下面的代碼沒有使用變量，但你可以有時乾脆綁定上選擇事件包裝多個元素

$('.wrapper button').on('click', func);

有了這個代碼，每個按鈕都有附加了事件處理程序。當你點擊一個元素，這引用的元素像展示在此的jsfiddle：https://jsfiddle.net/3uwx15vg/1/

作爲替代變量，你甚至可以鏈事件處理程序

$('.wrapper button').on('click', func).on('blur', func);

來源

2017-03-07 07:46:59

這可能是我描述的具體問題的一個很好的解決方案，但如果你有更多的包裝下的按鈕，你不希望聽衆附加到他們你必須指定一個新的類對你做的。但我總體上明白你的觀點。 – LilacEilim

@LilacEilim：的確如此。我通常將我的處理程序附加到具有特定數據屬性的元素（很少使用特定類前綴js- *） –

var $wrapper = $('.wrapper'), 
 
    $aBtn = ('.wrapper .a '), 
 
    $bBtn = ('.wrapper .b '), 
 
    $cBtn = ('.wrapper .c '); 
 

 
//The working but less neat solution 
 
//$('.wrapper .a, .wrapper .b, .wrapper .c').on('click', func); 
 

 
//What I want 
 
$($aBtn+", "+$bBtn+", "+$cBtn).on('click', func); 
 

 
function func() { 
 
    alert($(this).text()) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <button class="a">1</button> 
 
    <button class="b">2</button> 
 
    <button class="c">3</button> 
 
</div>

如果你可以改變選擇器只需連接它們，就像你用'.wrapper .a, .wrapper .b, .wrapper .c'

來源

2017-03-07 07:58:44 guradio

我可以使用變量以某種方式與.on Jquery

回答

相關問題