테스트 사이트 - 개발 중인 베타 버전입니다

여러개의 이미지를 버튼으로 만들려면? 채택완료

따라하기 10년 전 조회 2,667

각 이미지버튼 마다 값이 있고, 이미지 하나를 선택하면 그 값이 선택 되어진 상태로 하고 싶습니다.

(쇼핑몰의 옵션선택 기능 변형)

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
S
10년 전

각 이미지에다 클래스를 주고

스크립트로 처리하면 될거 같은데요.

 

</p><p><style></p><p>.imageBtn {</p><p style="margin-left: 40px;">width: 100px;</p><p style="margin-left: 40px;">height: 20px;</p><p>}</p><p>.imageBtn.active {</p><p style="margin-left: 40px;">border: 1px solid #cccccc;</p><p>}</p><p></style></p><p> </p><p><img src="..." class="imageBtn"><span id="husky_bookmark_end_1428467895000"></span></p><p><span style="font-size: 13.3333330154419px; line-height: 1.5;"><img src="..." class="imageBtn"></span></p><p><span style="font-size: 10pt; line-height: 1.5;"></span><span style="font-size: 13.3333330154419px; line-height: 1.5;"><img src="..." class="imageBtn"></span><span style="font-size: 10pt; line-height: 1.5;">​</span><span style="font-size: 10pt; line-height: 1.5;">​</span></p><p><span style="font-size: 10pt; line-height: 1.5;"> </span></p><p><span style="font-size: 10pt; line-height: 1.5;"><script></span></p><p><span style="font-size: 10pt; line-height: 1.5;">$("body").on("click", ".imageBtn", function() {</span></p><p style="margin-left: 40px;"><span style="font-size: 10pt; line-height: 1.5;">$(".imageBtn").removeClass("active");</span></p><p style="margin-left: 40px;"><span style="font-size: 10pt; line-height: 1.5;">$(this).addClass("active");</span></p><p><span style="font-size: 10pt; line-height: 1.5;">});</span></p><p><span style="font-size: 10pt; line-height: 1.5;"></script></span></p><p>

 

테스트는 안해봐서 버그가 있을지도 모르겠지만 대충 이런식으로 하면 될것 같네요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인