показать/скрыть div на основе радио, нажав с помощью класса

Question

У меня есть 4 переключателя, которые соответствуют 4 различным div. Я хочу fadeOut текущего div, а затем fadIn нового выбранного. прямо сейчас работает, но просто исчезает между изображениями.

Также есть способ изменить divs на основе класса радио, а не значения?

Код настоящее время у меня:

<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"); 

, И div нарастающего зависит от атрибута inputclass.

Кроме того, я предлагаю использовать этот (который должен быть быстрее)

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

вместо

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

Answer 3

"Я хочу fadeOut текущего div, а затем fadIn новый выбранный"

Использование FADEOUT() Функция обратного вызова:

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