Question

我正在用我自己的CSS和Jquery创建一个切换复选框但是卡住了，实际上我希望我的内盒从左到右和从右到左滑动onclick事件以及将文本从Yes更改为no和No是的。

我的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 任何人都可以帮助我

Answer 1

当您致电$('.outer-box').text('N');时，您正在覆盖<div class="inner-box" style="float:right;"></div>，因此它不会再出现了。你可以做的是将文本包装在一个范围内并更改该元素的文本，这样就不会再覆盖你的滑动框了。

请参阅此处的小提琴：http://jsfiddle.net/kF4QL/1/

Answer 2

请查看我对您的代码的观察： -

未定义左框ID
var value = $（'。outer-box'）。attr（'id'）;您将始终只获得右侧框的值。如果您正在寻找特定div上的click事件，则需要使用事件目标来识别它，然后切换div

如何使此复选框切换为工作状态

2 个答案: