afficher/masquer div basé sur la radio cliqué avec la classe

Question

J'ai 4 boutons radio qui correspondent à 4 divs différents. Je veux faderOut le div actuel, puis fadIn le nouveau sélectionné. En ce moment, cela fonctionne mais disparaît juste entre les images.

Existe-t-il un moyen de changer les divs en fonction de la classe et non de la valeur de la radio?

code J'ai actuellement:

<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

Oui, vous pouvez obtenir la classe de l'objet à l'aide jQuerys attr méthode:

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

Answer 2

Il suffit de remplacer

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

avec

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

Et le div fanée dans dépend de l'attribut class du input.

De plus, je suggère d'utiliser ce (qui devrait être plus rapide)

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

au lieu de

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

Answer 3

"Je veux faderOut la div actuelle et ensuite fadIn la nouvelle sélectionnée"

Utilisez la fonction de rappel fadeOut():

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