jquery - ボタンクリックでJQueryコードが機能しませんか?

Question

以下のように、divのタグ内に3つのボタンがあります。

<div id="make_larger">
<button type="button">Large</button> 
</div>
<div id="make_small">
<button type="button">Smaller</button> 
</div>
<div id="make_normal">
<button type="button">Normal</button> 
</div>

「大」ボタンをクリックすると、その色が青に変わる必要があります（CSSの.selectedクラスを使用して）.Jqueryコードは以下のとおりです。

$('#make_larger').bind('click', function () {
        $('body').addClass('large');
        $('body').removeClass('normal');
        $('body').removeClass('smaller');
        $(this).addClass('selected');

     });

しかし、それは機能していません。色は変更されていません。なんで？

助けてください。

Answer 1

HTML

<div id="make_larger">
    <button type="button">Large</button>
</div>
<div id="make_small">
    <button type="button">Smaller</button>
</div>
<div id="make_normal">
    <button type="button">Normal</button>
</div>
<style type="text/css">
    .selected{background:blue}
</style>

jQuery

$('#make_larger').click(function() {
     $('#make_larger button').addClass('selected');
});

デモhttp://jsfiddle.net/mRwMt/10/

Answer 2

ボタンではなく、含まれている div に選択したクラスを指定します。この jsfiddle を参照してください: http://jsfiddle.net/AFNJ9/。

ofcoure のような css を使用して何かを行うことができ .selected button {background:blue;}ます。これにより、ボタンの背景が青色になります。

私の意見では、「on」を使用するのはいいことです。「on」と「live」または「bind」の違いは何ですか?

Answer 3

最後の行をに変更

$(this).children('button').addClass('selected');