顯示/隱藏基於收音機點擊類div

Question

我有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> 

Answer 1

是的，你可以使用jQuerys attr方法獲取類對象：

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

Answer 2

只需更換

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

與

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

和褪色的依賴於input的class屬性div。

此外，我建議使用這個（這應該是更快）的

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

代替

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

Answer 3

「我想淡出當前的div，然後在新的選定的一個」

使用淡出（）回調函數：

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