Show/Hide 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')){} 

[EDIT] Обновлен код. Добавьте идентификатор идентификатора в код и обновленную ссылку JsFiddle.

Answer 1

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

jsfiddle

Answer 2

Попробуйте этот код:

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

http://jsfiddle.net/YZ9fh/