이 체크 박스를 작동시키는 방법

나는 내 자신의 CSS와 Jquery로 토글 체크 박스를 만들고 있는데, 실제로 내 안의 상자가 왼쪽에서 오른쪽으로 그리고 오른쪽에서 왼쪽으로 onclick 이벤트로 슬라이드하고 싶을뿐만 아니라 변경하기를 원한다. 텍스트는 예에서 아니오로, 아니오에서 예로 텍스트가 표시됩니다.이 체크 박스를 작동시키는 방법

내 CSS 파일은 다음과 같습니다

.outer-box{ 
background:green; 
padding:5px; 
width:50px; 
height:20px; 
} 

.inner-box{ 
background:blue; 
padding: 2px; 
width:17px; 
height:17px; 
display:inline; 
}

JS 파일은과 같습니다

$(document).ready(function(){ 
$('.outer-box').click(function(){ 
    var value = $('.outer-box').attr('id'); 
    alert(value); 
    if(value === 'right-box'){ 
     // alert(value+" -- "); 
     //$('.outer-box').text('N'); 
     $('.inner-box').css('float','left'); 
     $('.outer-box').text('N'); 
     $('.outer-box').removeAttr('id'); 
     $('.outer-box').attr('id','left-box'); 
    }else if(value === 'left-box'){ 
     $('.inner-box').css('float','right'); 
     $('.outer-box').text('Yes'); 
     $('.outer-box').removeAttr('id'); 
     $('.outer-box').attr('id','right-box'); 
    }     
    });  
});

그리고 내 HTML 파일은 다음과 같습니다

<!DOCTYPE html> 
<html> 
<title>Feed back Form</title> 
<head> 
<link rel="stylesheet" type="text/css" href="self.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> 
</script> 
<script type="text/javascript" src="self.js"></script> 
</head> 
<body> 
<div class="outer-box" id="right-box" > Yes 
     <div class="inner-box" style="float:right;"></div> 
    <div style="clear: both;"></div> 
</div> 
</body> 


</html>

가 내 체크 박스 버튼이 원하는 이 같은 : http://codepen.io/CreativeJuiz/pen/zqKtp 아무도 나를 도울 수

출처

2014-04-25 anand

내가 만든 [jsFiddle] (http://jsfiddle.net/kF4QL/) 사람들이 실험을 할 수 있도록 코드를 다시; 도움이된다고 생각되면 질문을 수정하여 자유롭게 포함 시키십시오. – DaveParsons

게시 한 펜을 사용하지 않는 이유는 무엇입니까? 아니면 더 나은 브라우저 지원을 원하십니까? http://caniuse.com/#feat=css-transitions –

바닐라 JS에서 일하는 것을 좋아하는 사람들을 위해 [여기는 바닐라 JS 버전입니다] (http://jsfiddle.net/KLe6B/) – Albzi

를 전환 한 후를 식별하기 위해 이벤트 대상을 사용합니다. 당신이 할 수있는 일은 스팬에 텍스트를 감싸고 그 엘리먼트의 텍스트를 바꾸는 것입니다, 그래서 당신은 더 이상 슬라이딩 박스를 덮어 쓰지 않습니다. 여기

참조 바이올린 : http://jsfiddle.net/kF4QL/1/

출처

2014-04-25 14:44:15 bottens

내가 원하면 내부 div를 왼쪽에서 오른쪽으로 움직입니다. 어떻게해야합니까? Jquery에서 애니메이션 기능을 시도했지만 작동시키지 못했습니다. 그리고 애니메이션 후 나는 에 텍스트를 래핑 한 후에 "Yes"& "NO"텍스트를 얻을 수있을 것입니다. float을 사용하는 대신 요소를 왼쪽으로 이동할 수 있으며 "아니오"텍스트가 오른쪽에 나타나야합니다. 마찬가지로 나는 그것을 오른쪽에 애니메이션 수 있어야하고 "예"텍스트가 나타납니다 – anand

나는 CSS에서 애니메이션을 할 것입니다. Heres 예제 : http://jsfiddle.net/kF4QL/14/ 여기에 언급 된 체크 박스 해킹 방법을 사용하여 조사해야합니다 : http://css-tricks.com/the-checkbox-hack/ – bottens

Thanks @ MBottens it 정말 위대하고 단순했습니다. – anand

는 코드 내 관찰을 찾아주세요 : -

왼쪽 박스 ID가 정의되어 있지
VAR 값 = $ ('외부 상자.') ATTR ('ID'). 항상 오른쪽 상자로만 값을 가져옵니다. 특정 사업부에 클릭 이벤트를 찾는 경우 , 당신은 당신이 당신의 <div class="inner-box" style="float:right;"></div> 그래서 더 이상 표시 나던 덮어 쓰는 $('.outer-box').text('N'); 호출 할 때 DIV

출처

2014-04-25 14:41:57 ravi

이 체크 박스를 작동시키는 방법

답변

관련 문제