jquery - ボタンがアクティブイベントを発生させたときにクラスを変更する方法

Question

アクティブなイベントが発生したときにボタンのクラスを変更するにはどうすればよいですか?

何かのようなもの：

$("#invitation button").mouseover(function() {
    $(this).addClass("ui-state-hover");
}).mouseout(function() {
    $(this).removeClass("ui-state-hover");
});

ただし、「アクティブな」イベントの場合。

Answer 1

よりクリーン:

$("#invitation").on('mousedown mouseup', 'button', function(){
    $(this).toggleClass("your-class");
});

http://api.jquery.com/on/のドキュメントを参照しon()てください。

Answer 2

$("#invitation button").mouseover(function() {
    $(this).addClass("ui-state-hover");
});
$("#invitation button").mouseout(function() {
    $(this).removeClass("ui-state-hover");
});

アクティブ（クリック）でクラスを変更

$("#invitation button").mousedown(function() {
    $(this).addClass("your-class");
});
$("#invitation button").mouseup(function() {
    $(this).removeClass("your-class");
});