У меня есть значок переключателя, чисто разработанный в CSS. Я получил дизайн для коммутатора с этой страницы https://www.w3schools.com/howto/howto_css_switch.asp и некоторые добавленные модификации на коммутаторе из этого ответа в переполнении стека https://stackoverflow.com/a/39846603/5550284.
Вот как это выглядит до сих пор
<!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>
Теперь я на самом деле хочу изменить состояние коммутатора с помощью JavaScript на основе флага, заданного серверной частью.
Так вот, что я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")
}
Предположим, здесь response - это объект, отправленный серверной частью, который имеет поле с именем data, которое содержит значение флага t или f.
Но, похоже, он ничего не делает, и используя инспектор в Firefox, я вижу, что элементы span случайно появляются и исчезают при переключении без какого-либо фиксированного поведения. Я подозреваю, что CSS для переключателя как-то влияет на состояние ползунка на переключателе.
Может кто-нибудь помочь мне с этой проблемой?