JQuery代码不工作在一个按钮点击？

Question

我有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> 

我想，当我将在“大”按钮的颜色单击要更改为蓝色（使用.selected CSS类为它）.Jquery代码如下所示。

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

    }); 

但它不工作。颜色没有被改变。 为什么？

请任何帮助。

Answer 1

改变最后一行

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

Answer 2

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'); 
}); 

DEMO http://jsfiddle.net/mRwMt/10/

Answer 3

你给包含的div选择的类，而不是按钮。看到这个jsfiddle：http://jsfiddle.net/AFNJ9/。

ofcoure你可以做一些类似于css： .selected button {background:blue;}这将使背景蓝色的按钮。

在我opionion它是很好的“上”使用方法：What's the difference between `on` and `live` or `bind`?