可能更好的方法来编写这个hacky切换按钮？ [英] Possibly better way to code this hacky toggle button?
本文介绍了可能更好的方法来编写这个hacky切换按钮？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个已经编码好的切换按钮，但我不认为它适合用在我的表单中，因为它是一个非常糟糕的代码来选择任一选项。
是否有更好/更有效的方法来代替此切换按钮？我对jQuery不太了解，所以对提供的功能的任何帮助都会有所帮助。
如果还有一种编程方式可以将切换左/右滑动，而不是点击左/右也会很棒。
我还附加了这些图片以显示应该如何运作的行为：
切换行为图
当前html文件（下面）按钮寻找左/右切换按钮
任何问题，请询问...
< html>
< head>
< style>
＃toggle-slide {
border：4px＃303F9F solid;
border-radius：5px;
display：flex;
width：300px;
颜色：白色;
font-weight：700;
text-align：center;
光标：指针;
}
＃toggle-slide div {
flex：1;
padding：10px 20px;
}
＃toggle-option-0 {
background-color：＃3F51B5;
}
＃toggle-option-1 {
background-color：white;
}
< / style>
< script>
function toggle（）{
realToggle = document.getElementById（'real-toggle'）;
if（realToggle.value == 0）{
realToggle.value = 1;
document.getElementById（'toggle-option-0'）。style.backgroundColor ='＃3F51B5';
document.getElementById（'toggle-option-1'）。style.backgroundColor ='＃FFF';
} else {
realToggle.value = 0;
document.getElementById（'toggle-option-0'）。style.backgroundColor ='＃FFF';
document.getElementById（'toggle-option-1'）。style.backgroundColor ='＃3F51B5';
}
}
< / script>
< / head>
< body>
< div id ='toggle-slide'onclick ='toggle（）'>
< div id ='toggle-option-0'class ='active'>私人< / div>
< div id ='toggle-option-1'>公开< / div>
< input id ='real-toggle'type = hidden name = private value = 1 />
< / div>
< / body>
< / html>
解决方案
你要求的是jQuery ......
$（document）.ready（function（）{$（'。input-button'）。 （'。public'）。$（'。public'）。$（'。private'）。$（'。private'）。addClass（' （'。'）; $（'。slider'）。stop（）。animate（{left：'48％'}，200）;} else {$（'。private'）。removeClass（'selected'）; $（ '.public'）。addClass（'selected'）; $（'。slider'）。stop（）。animate（{left：'2％'}，200）;}}）;}）;
html，body {padding：0; margin：0;}。input-button {width：200px; height：40px;顶部：50％;剩下：50％; margin-left：-100px; margin-top：-20px;位置：绝对; -webkit-box-sizing：border-box; -moz-box-sizing：border-box;盒子尺寸：边框;颜色：#FFF; background-color：＃2E86AB; border-radius：4px; line-height：40px; font-family：sans-serif; -webkit-box-shadow：0px 2px 0px 0px rgba（0，0，0，0.2）; -moz-box-shadow：0px 2px 0px 0px rgba（0，0，0，0.2）; box-shadow：0px 2px 0px 0px rgba（0，0，0，0.2）; cursor：pointer;} span {width：50％;身高：100％;向左飘浮; text-align：center;光标：指针; -webkit-user-select：none;}。input-button div {width：100px;身高：85％;顶部：50％;左：2％; transform：translateY（-50％）;位置：绝对; background-color：#FFF; border-radius：4px;} < script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><div class ='input-button'> < div class ='slider'>< / div> < span class ='private'>私人< / span> < span class ='public selected'> Public< / span>< / div> b
I have a toggle button that has been coded up, but I dont think its good to use in my form, since its a pretty bad hacky code to select either option.
Is there a better/efficient way to code this toggle button instead? I am not good with jQuery, so any help with provided functionality would be helpful.
If there is also a way of programming it to slide the toggle left/right instead of clicking left/right would be great also.
I have also attached these images to show the behaviour of how it should function:
toggle behaviour diagram
current html file(below) button look for left/right toggle buttons
Any questions, please ask...
<html>
<head>
<style>
#toggle-slide {
border: 4px #303F9F solid;
border-radius: 5px;
display: flex;
width:300px;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
}
#toggle-slide div {
flex:1;
padding: 10px 20px;
}
#toggle-option-0 {
background-color:#3F51B5;
}
#toggle-option-1 {
background-color:white;
}
</style>
<script>
function toggle() {
realToggle = document.getElementById('real-toggle');
if (realToggle.value == 0) {
realToggle.value=1;
document.getElementById('toggle-option-0').style.backgroundColor='#3F51B5';
document.getElementById('toggle-option-1').style.backgroundColor='#FFF';
} else {
realToggle.value=0;
document.getElementById('toggle-option-0').style.backgroundColor='#FFF';
document.getElementById('toggle-option-1').style.backgroundColor='#3F51B5';
}
}
</script>
</head>
<body>
<div id='toggle-slide' onclick='toggle()'>
<div id='toggle-option-0' class='active'>Private</div>
<div id='toggle-option-1'>Public</div>
<input id='real-toggle' type=hidden name=private value=1 />
</div>
</body>
</html>
解决方案
You can do this completely in pure css, but since you were asking for jQuery...
$(document).ready(function() {
$('.input-button').click(function() {
if ($('.public').hasClass('selected')) {
$('.public').removeClass('selected');
$('.private').addClass('selected');
$('.slider').stop().animate({
left: '48%'
}, 200);
} else {
$('.private').removeClass('selected');
$('.public').addClass('selected');
$('.slider').stop().animate({
left: '2%'
}, 200);
}
});
});
html,
body {
padding: 0;
margin: 0;
}
.input-button {
width: 200px;
height: 40px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -20px;
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #2E86AB;
border-radius: 4px;
line-height: 40px;
font-family: sans-serif;
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
span {
width: 50%;
height: 100%;
float: left;
text-align: center;
cursor: pointer;
-webkit-user-select: none;
}
.input-button div {
width: 100px;
height: 85%;
top: 50%;
left: 2%;
transform: translateY(-50%);
position: absolute;
background-color: #FFF;
border-radius: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='input-button'>
<div class='slider'></div>
<span class='private'>Private</span>
<span class='public selected'>Public</span>
</div>
这篇关于可能更好的方法来编写这个hacky切换按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
