如何在两组文本之间进行切换？
如何在两组文本之间进行切换？
提问于 2018-09-19 06:29:16
我正在尝试在两组文本之间切换切换条。我已经让开关和滑块工作了，但我不知道如何将功能连接到滑块上。
我用W3School做了一个测试环境：
https://www.w3schools.com/code/tryit.asp?filename=FVEFVIB1J6D2
切换代码的格式是正确的，但它不接受图形的格式。
function myFunction() {
var x = document.getElementById("myDIV");
if (x.innerHTML === "Longer text") {
x.innerHTML = "Shorter text";
} else {
x.innerHTML = "Longer text";
}
}.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: #009bff;
-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);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}<p>
<switch onclick="myFunction()">Choose your lenght </switch>
</p>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<div id="myDIV">Longer Story</div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-09-19 06:40:48
您只需要将一个侦听器附加到输入更改
HTMLInputElementObject.addEventListener('input', function (evt) {
myFunction();
});假设HTMLInputElementObject为"input“：
function myFunction() {
var x = document.getElementById("myDIV");
if (x.innerHTML === "Longer text") {
x.innerHTML = "Shorter text";
} else {
x.innerHTML = "Longer text";
}
}
document.getElementById("mySlider").addEventListener('input', function (evt) {
myFunction();
});.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: #009bff;
-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);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;}<label class="switch">
<input type="checkbox" id="mySlider">
<span class="slider round"></span>
</label>
<div id="myDIV">Longer text</div>
Stack Overflow用户
发布于 2018-09-19 06:37:24
你的任务就快完成了。您所要做的就是将onClick回调添加到span中，并使用类slider round，如下所示：
<label class="switch">
<input type="checkbox">
<span class="slider round" onclick='myFunction()'></span>
</label>Stack Overflow用户
发布于 2018-09-19 06:38:56
onclick需要放在input元素或span元素上，如下所示
<label class="switch">
<input type="checkbox" onclick="myFunction()">
<span class="slider round"></span>
</label>我也为你清理了你的代码，因为你的style标签在body里面，你有额外的body标签，你的元素不管什么原因都在html标签之外。
https://www.w3schools.com/code/tryit.asp?filename=FVEGHO8VCQJA
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52395439
复制相关文章
相似问题
腾讯云开发者
