基于类点击的收音机显示/隐藏 div答案

【问题标题】：show/hide div based on radio clicked with class基于类点击的收音机显示/隐藏 div
【发布时间】：2012-01-30 03:31:37
【问题描述】：

我有 4 个单选按钮，对应于 4 个不同的 div。我想淡出当前的 div，然后淡入新选择的一个。现在它的工作，但只是在图像之间淡出。

还有没有办法根据收音机的类而不是值来更改 div？

我目前拥有的代码：

<input type="radio" name="myRadio" class="myDiv_1" value="myDiv_1" />Image1<br />
<input type="radio" name="myRadio" class="myDiv_2" value="myDiv_2" />Image2<br />
<input type="radio" name="myRadio" class="myDiv_3" value="myDiv_3" />Image3<br />

<div id="myDiv_1" class="shade" style="display:block;"><img>TEXT BELOW IMAGE</div>
<div id="myDiv_2" class="shade" style="display:block;"><img>TEXT BELOW IMAGE</div>
<div id="myDiv_3" class="shade" style="display:block;"><img>TEXT BELOW IMAGE</div>

<script type="text/javascript">
$(document).ready(function(){
    $('input[name="myRadio"]').click(function() {
        var selected = $(this).val();
        $(".shade").fadeOut("slow");
        $('#' + selected).fadeIn("slow");
    });
});
</script>

【问题讨论】：

标签： jquery animation radio-button

【解决方案1】：

“我想淡出当前的div，然后淡入新选择的div”

使用fadeOut()回调函数：

$(".shade").fadeOut("slow", function() {
    $('#' + selected).fadeIn("slow");
});

【讨论】：

回调不起作用。单击单选按钮时，它会淡出到新的 div，但随后新选择的 div 会淡出然后又重新进入。它基本上会淡出很多次。如果需要，我可以链接到一个示例。

【解决方案2】：

只需替换

var selected = $(this).val();

与

var selected = $(this).attr("class");

而淡入的div 取决于input 的class 属性。

另外我建议使用这个（应该更快）

$("div.shade:visible").fadeOut("slow");

而不是

$(".shade").fadeOut("slow");

【讨论】：

【解决方案3】：

是的，你可以使用jQuerys的attr方法获取对象的类：

var selected = $(this).attr("class");

【讨论】：