2

假设我有三个按钮

<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(...或类似？

4

1 回答 1

8

您可以使用add方法：

$growButton.add($shrinkButton).on(...)
于 2013-02-19T22:53:51.543 回答