이 데모 https://jsfiddle.net/DTcHh/18578/ 있습니다. 내가하려는 것은 버튼 레지스터의 배경이 녹색으로 변경되고 모달 헤더에서 사용자가 bussines를 클릭하면 이미지를 변경하고 싶습니다. 어떠한 제안?
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="exampleModalLabel"><img src="img/user_icon_blue.png" />REGISTER</h4>
<span class="reg_type">SELECT ACCOUNT TYPE</span>
<div class="typeOfRegistration">
<input type="radio" id="radio02" class="green" name="typeOfRegistration" data-target="#business" />
<label for="radio02"><span></span>Business</label>
</div>
<div class="typeOfRegistration">
<input type="radio" checked="checked" class="blue" id="radio01" name="typeOfRegistration" data-target="#personal"/>
<label for="radio01"><span></span>Personal</label>
</div>
<div class="line"></div>
</div>
버튼 색상과 이미지를 변경하는 jquery는 다음과 같습니다.
$("input[type='radio']").on("change", function(){
var rdo = $(this)[0];
if(rdo.id == "radio02"){
$(".btn, .btn-primary").css({
backgroundColor: "green"
});
$("#registrationImg").remove();
} else {
$(".btn, .btn-primary").css({
backgroundColor: "#428BCA"
});
//$("#exampleModalLabel").append('<img id="registrationImg" src="user-icon_blue.png" />');
var lbl = $('#registrationLabel');
$('<img id="registrationImg" src="user-icon_blue.png" />').insertBefore(lbl);
}
});
FIDDLE 참조 html에 대한 약간의 변경 사항에 유의 하십시오 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다