jquery單選按鈕顯示/隱藏

Question

我有3個單選按鈕。
*如果單擊電子郵件按鈕將只顯示電子郵件文本框
*如果單擊集合將只顯示集合文本框並隱藏其他div。我怎麼做？ 下面的代碼似乎只顯示，但不能隱藏在更改！

<input type="radio" name="d_method" class="c_email"/>Email 
<input name="d_method" type="radio" class="c_collection"/>Colletion 
<input name="d_method" type="radio" class="c_post"/>Post 

和3個隱藏的div id爲：

<div id="c_email" style="display:none;"> 
    email textbox 
</div> 
<div id="c_collection" style="display:none;"> 
    collection textbox 
</div> 
<div id="c_post" style="display:none;"> 
    post textbox 
</div> 

和jQuery：

$('.c_email').change(function() { 
     $('#c_email').stop().fadeIn(); 
    }, function(){ 
     $('#c_email').stop().hide(); 
    }) 
    $('.c_collection').change(function() { 
     $('#c_collection').stop().fadeIn(); 
    }, function(){ 
     $('#c_collection').stop().hide(); 
    }) 
    $('.c_post').change(function() { 
     $('#c_post').stop().fadeIn(); 
    }, function(){ 
     $('#c_post').stop().hide(); 
    }) 

Answer 1

你可以簡單地做

$(':radio').change(function() { 
    var itemSelector = '#' + $(this).attr('class'); 
    $('div').stop().fadeOut(function() { 
     $(itemSelector).fadeIn(); 
    }); 
}); 

這一切都是基於你的約定班級名稱與您的ID相同