我正在用我自己的 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 谁能帮帮我
最佳答案
当您调用 $('.outer-box').text('N'); 时你正在覆盖你的 <div class="inner-box" style="float:right;"></div>所以它不再出现了。您可以做的是将文本包裹在一个跨度中并更改该元素的文本，这样您就不会再覆盖您的滑动框。
在这里查看 fiddle :http://jsfiddle.net/kF4QL/1/
关于javascript - 如何让这个复选框切换工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23295987/