Javascript 显示/隐藏Divs多个单选按钮JQuery

我正在帮我的朋友Michaela上我们的网页设计课。她做了HTML，我只修改了几行，添加了一些div。她希望这样，如果用户单击单选按钮，则会显示相应的div。所有div的表格都隐藏在一个类“隐藏的命运”中--这将是一系列嵌套的div，我以后可能需要更改布局

这是我的建议。 以下是我的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标识符并更新JSFIDLE链接。

尝试以下代码：

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

请尝试以下代码：

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

---

---

那么您面临的问题是什么？请你先向我们解释一下，在radio#u Starwars之前，你丢失了一个类标识符，一个句号。实际上，它应该是一个id-#@jqueryrocks修复了它，并且div标记仍然不会显示。那么，你面临的问题是什么？请你先向我们解释一下，在radio#u Starwars之前，你丢失了一个类标识符，一个句号。实际上，它应该是一个id-#@jqueryrocks修复了它，div标签仍然不会显示。谢谢。我没有看到

.change（）

或第三行代码。而且，你的小提琴能用，但我的代码却不能用？因为jQuery包含在你的链接中。哦。。。我没有意识到这一点。我忘了。我已经把它包括在实际页面中了。谢谢。我没有看到

.change（）

或第三行代码。而且，你的小提琴能用，但我的代码却不能用？因为jQuery包含在你的链接中。哦。。。我没有意识到这一点。我忘了。我已经把它包括在实际页面中了。谢谢！！！这为我节省了很多代码。我打算为每个函数创建一个if语句。此在您的函数中等同于什么？每个是如何工作的？我可以猜，但我更想确定。

这个

是调用函数的元素，

每个

迭代选择元素，在本例中，这些元素都是类

隐藏的元素

谢谢。另外，我实现了代码，我注意到如果我多次单击单选按钮，动画会发生变化。这是怎么发生的？因为函数被分配给

click

事件，并且每次单击都会触发，所以可以使用jquery

stop（）

方法来防止排队。查看我更新的演示如何使用

stop（）

我明白为什么单击第一个按钮会滑下。但是，如果单击每个向下的动画，则动画将反向返回。而《星球大战》总是下滑。我喜欢

.stop（）

。我以前真的用过。谢谢！！！这为我节省了很多代码。我打算为每个函数创建一个if语句。此在您的函数中等同于什么？每个是如何工作的？我可以猜，但我更想确定。

这个

是调用函数的元素，

每个

迭代选择元素，在本例中，这些元素都是类

隐藏的元素

谢谢。另外，我实现了代码，我注意到如果我多次单击单选按钮，动画会发生变化。这是怎么发生的？因为函数被分配给

click

事件，并且每次单击都会触发，所以可以使用jquery

stop（）

方法来防止排队。查看我更新的演示如何使用

stop（）

我明白为什么单击第一个按钮会滑下。但是，如果单击每个向下的动画，则动画将反向返回。而《星球大战》总是下滑。我喜欢

.stop（）

。我以前确实用过。