如何使用 jquery 动态更改开关的状态? [英] How to change state of a switch dynamically using jquery?
问题描述
我有一个纯粹用 CSS 设计的开关图标.我从这个页面获得了 switch 的设计 https://www.w3schools.com/howto/howto_css_switch.asp 以及堆栈溢出中此答案的一些附加修改 https://stackoverflow.com/a/39846603/5550284 .
这是目前的样子
<头><title></title><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="ie=edge"><style type="text/css">.转变 {位置:相对；显示:内联块；宽度:90px；高度:34px；}.switch 输入 {display:none;}.slider {位置:绝对；光标:指针；顶部:0；左:0；右:0；底部:0；背景颜色:#ca2222；-webkit-transition: .4s;过渡:.4s；}.slider:before {位置:绝对；内容: "";高度:26px；宽度:26px；左:4px；底部:4px；背景颜色:白色；-webkit-transition: .4s;过渡:.4s；}输入:选中 + .slider {背景色:#2ab934；}输入:焦点 + .slider {框阴影:0 0 1px #2196F3;}输入:检查+ .slider:之前{-webkit-transform: translateX(55px);-ms-transform: translateX(55px);变换:translateX(55px);}/*------ 添加 CSS ---------*/.在{显示:无；}.开关{白颜色;位置:绝对；变换:翻译(-50%，-50%)；顶部:50%；左:50%；字体大小:10px；字体系列:Verdana，无衬线；}输入:选中+ .slider .on{显示:块；}输入:选中 + .slider .off{显示:无；}/* - - - - - 结尾 - - - - *//* 圆形滑块 */.slider.round {边框半径:34px；}.slider.round:before {边界半径:50%;}</风格><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz"crossEuK6ys><身体><label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"><span class="on">ON</span><span class="off">OFF</span><script src="https://code.jquery.com/jquery-2.2.4.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7"cross<script type="text/javascript"></html>
现在我实际上想根据后端给出的标志使用 JavaScript 更改开关的状态.
这就是我要做的
if(response.data == "t"){$('.switch-off').remove();$('.switch-on').remove();$('.toggle-slider').append('<span class="switch-on"></span>');console.log("提示开启")}else if (response.data == "f") {$('.switch-on').remove();$('.switch-off').remove();$('.toggle-slider').append('<span class="switch-off"></span>');console.log("提示关闭")}这里假设 response 是后端发送的对象，它有一个名为 data 的字段，其中包含标志值 t 或 <代码>f.
但它似乎没有做任何事情，并且在 Firefox 中使用检查器，我看到 span 元素在切换时随机出现和消失，没有任何固定行为.我怀疑开关的 CSS 以某种方式干扰了开关上滑块的状态.
有人可以帮我解决这个问题吗?
您有一个隐藏的复选框来切换开关.所以这样做会打开它:
$('#togBtn').prop('checked', true);
然后关闭:
$('#togBtn').prop('checked', false);
添加完整代码
所以你的完整代码是:
if (response.data == "t") {$('#togBtn').prop('checked', true);}else if (response.data == "f") {$('#togBtn').prop('checked', false);}I have a switch icon purely designed in CSS. I got the design for switch from this page https://www.w3schools.com/howto/howto_css_switch.asp and some added modifications on the switch from this answer in stack overflow https://stackoverflow.com/a/39846603/5550284 .
This is how it looks like so far
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type="text/css">
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
/*------ ADDED CSS ---------*/
.on
{
display: none;
}
.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}
/*--------- END --------*/
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
</script>
</body>
</html>
Now I actually want to change the state of the switch using JavaScript based on the flag given by the back-end.
So this is what I do
if(response.data == "t"){
$('.switch-off').remove();
$('.switch-on').remove();
$('.toggle-slider').append('<span class="switch-on"></span>');
console.log("Prompt ON")
}
else if (response.data == "f") {
$('.switch-on').remove();
$('.switch-off').remove();
$('.toggle-slider').append('<span class="switch-off"></span>');
console.log("Prompt OFF")
}
Assume here response is an object sent by the back-end which has a field called data which contains the flag value t or f.
But it doesn't seem to do anything and using inspector in Firefox, I see the span elements randomly appearing and disappearing on toggle without any fixed behaviour. I suspect the CSS for the switch is somehow interfering with the state of the slider on the switch.
Can someone help me out with this problem?
You have a hidden checkbox which toggles the switch. So doing this will toggle it on:
$('#togBtn').prop('checked', true);
and off:
$('#togBtn').prop('checked', false);
EDIT: Added full code
So your full code would be:
if (response.data == "t") {
$('#togBtn').prop('checked', true);
}
else if (response.data == "f") {
$('#togBtn').prop('checked', false);
}
这篇关于如何使用 jquery 动态更改开关的状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
