我正在帮我的朋友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链接。
答案 0 :(得分:2)
试试这段代码:
$(":radio").change(function(){
$(".hidden_destiny").hide()//hide divs
$("#clicked_"+this.id.replace("radio_","")).show()//show div by radio id
})
答案 1 :(得分:2)
$('.fate').click(function () {
$('.hidden_destiny').each(function () {
if ($(this).is(':visible')) {
$(this).slideUp('slow');
}
});
var id = $(this).val();
$('#clicked_' + id).slideDown('slow');
});