javascript - マウスオーバー時のクラス変更

Question

ボタンをクリックするとスパンクラスを変更するJavaScriptの関数がありますが、そのスパンの上にマウスを移動すると、古いクラスのクラスが変更されます。なんで？

Answer 1

HTMLボタンが次のようにレンダリングされた場合：

<button class="btn-primary">Awesome Button</button>
<p>My class is <span class="label">btn-primary</span>

次のようにクラスを置き換えることができます。

$('button').on('click', function(){
    var self = $(this);
    self.removeClass('btn-primary').addClass('btn-danger');
    $('span').text('btn-danger');
});​

これが機能的なjsFiddleの例です