顯示/隱藏Divs多個單選按鈕jQuery

Question

我正在幫助我的朋友Michaela參加我們的網頁設計課程。 她編寫了HTML，而我僅更改了幾行，並添加了一些div。 她希望這樣，如果用戶單擊單選按鈕，則會顯示相應的div。 她表單的所有div都開始隱藏在“ hidden_​​destiny”類中。 -這將是一系列嵌套的div，稍后我可能需要更改布局。

這是JsFiddle 。 這是我的JavaScript：

if ($('#radio_starwars').is(':checked')){
    $('#clicked_starwars').hide().slideDown('slow');
    $('.hidden_destiny').not('#clicked_starwars').hide().slideUp('slow');
}
else if ($('#radio_avengers').attr('checked', 'true')){}
else if ($('#radio_batman').attr('checked', 'true')){}
else if ($('#radio_xmen').attr('checked', 'true')){}
else if ($('#radio_harryp').attr('checked', 'true')){}
else if ($('#radio_lotr').attr('checked', 'true')){}

[編輯]更新了代碼。 將ID標識符添加到代碼中，並更新JsFiddle鏈接。

Answer 1

試試這個代碼：

$(":radio").change(function(){
  $(".hidden_destiny").hide()//hide divs
  $("#clicked_"+this.id.replace("radio_","")).show()//show div by radio id
})

http://jsfiddle.net/YZ9fh/

Answer 2

$('.fate').click(function () {
    $('.hidden_destiny').each(function () {
        if ($(this).is(':visible')) {
            $(this).slideUp('slow');
        }
    });
    var id = $(this).val();
    $('#clicked_' + id).slideDown('slow');
});

的jsfiddle