Как разместить изображение над изображением, когда установлен переключатель?

Question

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

CSS

#selectedRadio { 
     display:none; 
     width:74px; 
     height:69px; 
     position:absolute; 
     margin-top:20px; 
} 

Jquery

<script> 
jQuery(function(){ 
     jQuery("input[name=choose]").change(function(){   
      if ($(this).is(":checked")) { 
       jQuery("#selectedRadio").slideDown() 
      }              
     }); 
}); 
</script> 

HTML

<div id="selectedRadio"><img src="selected.png" /></div> 
<input name="choose" value="black"> <br><img src ="black.jpg" /> 
<input name="choose" value="white"> <br><img src ="white.jpg" /> 
<input name="choose" value="red"> <br><img src ="red.jpg" /> 
<input name="choose" value="blue"> <br><img src ="blue.jpg" /> 

Answer 1

Я создал a fiddle that shows one way of doing this.

Вот HTML:

<div class="container"> 
    <label> 
     <input type="radio" name="choose" value="black"/> 
     <img src="black.jpg" alt="black image" data-color="black" /> 
    </label> 
    <label> 
     <input type="radio" name="choose" value="white"/> 
     <img src="white.jpg" alt="white image" data-color="white" /> 
    </label> 
    <label> 
     <input type="radio" name="choose" value="red"/> 
     <img src="red.jpg" alt="red image" data-color="red" /> 
    </label> 
    <label> 
     <input type="radio" name="choose" value="blue"/> 
     <img src="blue.jpg" alt="blue image" data-color="blue" /> 
    </label> 
</div> 

Вот JS:

$(function() { 
    $('label').click(function() { 
     var that = this, 
      images = $(this).closest('div.container').find('img'); 
     images.each(function() { 
      var t = $(this); 
      if (t.data('color') === $(that).find('input').val()) { 
       t.attr({ 
        src: 'selected.png', 
        alt: 'selected image' 
       }); 
      } else { 
       t.attr({ 
        src: t.data('color') + '.jpg', 
        alt: t.data('color') + ' image' 
       }); 
      } 
     }); 
    }); 
}); 

И некоторые основные стиль:

label { 
    display: inline-block; 
    width:150px; 
} 
input, 
img { 
    display: block; 
} 

Опять же, это только один из возможных способов сделать это, чтобы понять концепцию.

Answer 2

возможно использовать шкурку()/show()? http://www.w3schools.com/jquery/jquery_hide_show.asp