3つのボタンがあるとしましょう
<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イベント ハンドラを拡大ボタンと縮小ボタンに追加するとします。これらのボタンのハンドラーは同じですが、通常のボタンのハンドラーは異なります。
これを行うにはいくつかの方法がありますが、基本的にはすべて同じアイデアです。最初のボタンに 1 回、次のボタンに 1 回、2 回割り当てるだけです。
そう、
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(...かどうかです。