如何jQuery的事件處理程序適用於多個緩存選擇？

可以說我有三個按鈕如何jQuery的事件處理程序適用於多個緩存選擇？

<button data-action="grow" class="resizeButton">Grow</button> 
<button data-action="shrink" class="resizeButton">Shrink</button> 
<button id="normalButton">Normal Button</button>

我有變數的按鈕

var $normalButton = $('#normalButton'); 
var $growButton = $('.resizeButton[data-action="grow"]'); 
var $shrinkButton = $('.resizeButton[data-action="shrink"]');

現在可以說，我想一個mouseenter，mouseleave和click事件處理程序掛接到正常的按鈕

$normalButton.on({ 
    mouseenter: function(){ 
     //do some stuff 
    }, 

    mouseleave: function(){ 
     //reverse some stuff 
    }, 

    click: function(){ 
     //do some more stuff 
    } 
});

神奇的jQuery嚮導讓我們爲此工作。

現在讓我們說我們想要添加一個mouseenter,mouseleave和click事件處理程序到增長按鈕和收縮按鈕。這些按鈕的處理程序相同，但正常按鈕的處理程序不同。

有一對夫婦的方式，我可以看到要做到這一點，但他們基本上都是同樣的想法，只是爲它們分配兩次，第一次的第一個按鈕，一旦到下一個按鈕。

所以，

var handlers = { 
    mouseenter: function(){ 
     //do some different stuff 
    }, 

    mouseleave: function(){ 
     //reverse some different stuff 
    }, 

    click: function(){ 
     //do some more different stuff 
    } 
}; 

$growButton.on(handlers); 
$shrinkButton.on(handlers);

或

$.each([$growButton, $shrinkButton], function(i, el){ 
    el.on({ 
     mouseenter: function(){ 
      //do some different stuff 
     }, 

     mouseleave: function(){ 
      //reverse some different stuff 
     }, 

     click: function(){ 
      //do some more different stuff 
     } 
    }); 
});

但我想知道是如果有一個語法來創建一個jQuery對象，或者只是應用處理一組緩存選擇器的像$([$growButton, $shrinkButton]).on(...或類似的？

來源

2013-02-19 Hailwood

您可以使用add方法：

$growButton.add($shrinkButton).on(...)

來源

2013-02-19 22:53:51 undefined

添加到這一點，你可以更動態地希望您的代碼，例如，推動所有元素到一個數組，然後將事件適用於所有的人。你可以：簡單地使用'$（arrayOfJqueryObjects）'。 – gustavohenke 2013-02-19 23:01:03

@gustavohenke你爲什麼要這麼做時，你可以使用'add'？使用'var jqObjs = $（「＃el1」）; jqObjs.add（$（「＃EL2」））; jqObjs.add（$（「＃EL3」））;' - 其中，當然，通過添加具體的事情會在這種情況下，現有的jQuery對象。它比處理數組要好得多。 – Ian 2013-02-19 23:15:36

如何jQuery的事件處理程序適用於多個緩存選擇？

回答

相關問題