컨테이너와 3 개의 라디오 버튼에 이미지가 있습니다. 일부 라디오 버튼을 선택하면 컨테이너 기본 이미지 위에 다른 이미지가 표시되도록 추가하고 싶습니다. 각 버튼은 활성화되었을 때 표시되는 이미지의 위치가 다릅니다.
지금까지 나는 그것을 얻었다 :
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" id="q156" name="quality[25]" value="1" /> 1
</label>
<label class="btn btn-default">
<input type="radio" id="q157" name="quality[25]" value="2" /> 2
</label>
<label class="btn btn-default">
<input type="radio" id="q158" name="quality[25]" value="3" /> 3
</label>
</div>
</div>
</div>
<div class="col-md-8 col-fl">
<div id="img_box">
<img style="width: 100%;" src="img/other/rounded_corners.png" />
</div>
이미지 소스를 데이터 속성으로 추가 할 수 있습니다. 라디오 버튼에.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" id="q156" name="quality[25]" value="1" data-img="http://placehold.it/350x150/ff0000" /> 1
</label>
<label class="btn btn-default">
<input type="radio" id="q157" name="quality[25]" value="2" data-img="http://placehold.it/350x150/00ff00"/> 2
</label>
<label class="btn btn-default">
<input type="radio" id="q158" name="quality[25]" value="3" data-img="http://placehold.it/350x150/0000ff" /> 3
</label>
</div>
<div class="col-md-8 col-fl">
<div id="img_box"></div>
img 상자는 비어 있지만 크기와 이미지는 CSS로 설정됩니다.
#img_box{
width: 350px;
height: 150px;
background: url('http://placehold.it/350x150/ff0000')
}
그런 다음 클릭시 img 오버레이를 추가하는 이벤트를 추가합니다 (라디오 버튼의 소스 사용).
$(function(){
$('input[type=radio]').click(function(){
$this = $(this)
$img_box = $('#img_box')
$overlay = $('<img/>').attr('src',$this.data('img'))
$img_box.html('').append($overlay)
});
})
이 예를 참조하십시오 : https://jsfiddle.net/fmytsjv7/1/
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다