on/off 스위치 css 유지하는법
안녕하세요 db값에 따라 on/off를 나타내고싶습니다
https://stackoverflow.com/questions/39846282/how-to-add-the-text-on-and-off-to-toggle-button
참고해서
Copy
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 20px;
top : 100%;
margin-left: -27px;
margin-top : 25px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #CCC;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: var(--BASE_COLOR);
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(35px);
-ms-transform: translateX(35px);
transform: translateX(35px);
}
/*------ ADDED CSS ---------*/
.check_on
{
display: none;
}
.check_on, .check_off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .check_on
{display: block;}
input:checked+ .slider .check_off
{display: none;}
.slider.round {
border-radius: 32px;
}
.slider.round:before {
border-radius: 50%;}
css부분이고,
Copy
// DB에 저장된게 Y이면,
//DB내용을 수정
ON //스위치 ON
//DB에 저장된게 N이면,
//DB내용을 수정
OFF // 스위치 OFF
이런식으로 구현했습니다
스위치를 클릭했을때 DB갱신은 되는데 DB값에 따라 스위치가 ON/OFF 상태가 유지가 되지 않네요 ㅜㅜ
혹시 참고할만한 홈페이지나 내용 알고 계신분 알려주시면 감사하겠습니다..!
답변 2개
devdev
6년 전
|
|
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
6년 전
jquery 로 클릭 이벤트를 가지고 해당 css를 변경하셔야 합니다.
$(document).ready(function(){
$(".check_off").click(function(){
$(this).removeClass("check_off");
$(this).addClass("check_on");
});
});
이런식으로요..
원하시는 내용이 맞을지 모르겠네요.
도움이 되었으면 합니다~
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인