Question

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

还有一种方法可以根据收音机的类改变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>

Answer 1

“我希望fadeOut当前div然后fadIn新选择的那个”

使用fadeOut（）回调函数：

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

Answer 2

只需替换

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

与

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

div淡出取决于class的{{1}}属性。

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

input

而不是

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

Answer 3

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

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

根据点击课程的广播显示/隐藏div

3 个答案: