slick slide 이용하여 슬라이드 폼 회원가입 페이지를 만드려고 합니다.

Question

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ include file="/WEB-INF/views/inc/top.jsp"%> ">

jsp 이고 body { background: #ffffff; } form { width: 60%; margin: 60px auto; background: #efefef; padding: 60px 120px 80px 120px; text-align: center; -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.1); box-shadow: 2px 2px 3px rgba(0,0,0,0.1); } .slick-track .slick-slide { height: 1000px; } label { display: block; position: relative; margin: 40px 0px; } #div-f div { padding-left: 10px; margin: 0 auto; text-align: left; } #div-s div { padding-left: 10px; margin: 0 auto; text-align: left; } #div-f input[type=checkbox]{ display: none; } #div-s input[type=checkbox]{ display: none; } .label-txt { position: absolute; top: -1.6em; padding: 10px; font-family: sans-serif; font-size: .8em; letter-spacing: 1px; color: rgb(120,120,120); transition: ease .3s; } .input { width: 100%; padding: 10px; background: transparent; border: none; outline: none; } .line-box { position: relative; width: 100%; height: 2px; background: #BCBCBC; } .line { position: absolute; width: 0%; height: 2px; top: 0px; left: 50%; transform: translateX(-50%); background: #8BC34A; transition: ease .6s; } .input:focus + .line-box .line { width: 100%; } .label-active { top: -3em; } button { display: inline-block; padding: 12px 24px; background: rgb(220,220,220); font-weight: bold; color: rgb(120,120,120); border: none; outline: none; border-radius: 3px; cursor: pointer; transition: ease .3s; } button:hover { background: #8BC34A; color: #ffffff; }css 입니다. 체크박스가 너무 작아서 폰트어썸에서 아이콘을 가져와 인풋값이 체크일 때 체크, 아닐 때 박스로 표현하려고 했는데 체크가 풀릴때 체크 체크일 때 박스로 변해서 8시간 동안 수정해 봤는데 안되서 질문드립니다. 조언+해결책 부탁드립니다.

ukyo · Accepted Answer

웹기획1 $("input[name='menu1[]']").each(function(){ $(this).on('click', function(){ if($(this).is(":checked") == true ){ $(this).prev().addClass('fa-check-circle'); $(this).prev().removeClass('fa-square'); }else { $(this).prev().addClass('fa-square'); $(this).prev().removeClass('fa-check-circle'); } })});이렇게 하시면 될것같습니다.

sGPs · Answer

$("input[name='menu1[]']").each() 내부의 if else 문이 반대로 작동한다는 말씀이신것 같은데 몇가지 의문점이 보여 말씀드립니다. 1. $("input[name='menu1[]']").each() 로 반복문을 돌리고 $(this).html() 로 내부 html을 작성하는데 에 닫는 태그가 없어 내부 html의 구조가 명확하지 않습니다.2. 이런 구조를 의도하신 것이라고 가정하면 $(this).html() 에서 에 대한 부분이 없는 것이 의아합니다.3. $(this).html(" "+val) 의 val 이 어디에 선언되었는지 보이지않습니다. 이런 식으로 해보는건 어떨까요? $('label').click(function(){ if($(this).closest('div').find('input').is(":checked")){ $(this).find('i').removeClass('fa-square').addClass('fa-check-circle'); }else{ $(this).find('i').removeClass('fa-check-circle').addClass('fa-square'); } }

장덕춘 · Answer

감사합니다 다들!

slick slide 이용하여 슬라이드 폼 회원가입 페이지를 만드려고 합니다.

3개의 답변

#slick 목록