如何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的事件处理程序适用于多个缓存选择？

回答

相关问题