首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在两组文本之间进行切换?

如何在两组文本之间进行切换?
EN

Stack Overflow用户
提问于 2018-09-19 06:29:16
回答 3查看 50关注 0票数 0

我正在尝试在两组文本之间切换切换条。我已经让开关和滑块工作了,但我不知道如何将功能连接到滑块上。

我用W3School做了一个测试环境:

https://www.w3schools.com/code/tryit.asp?filename=FVEFVIB1J6D2

切换代码的格式是正确的,但它不接受图形的格式。

代码语言:javascript
复制
function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.innerHTML === "Longer text") {
        x.innerHTML = "Shorter text";
    } else {
        x.innerHTML = "Longer text";
    }
}
代码语言:javascript
复制
.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%;
}
代码语言:javascript
复制
<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>

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-09-19 06:40:48

您只需要将一个侦听器附加到输入更改

代码语言:javascript
复制
HTMLInputElementObject.addEventListener('input', function (evt) {
    myFunction();
});

假设HTMLInputElementObject为"input“:

代码语言:javascript
复制
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();
});
代码语言:javascript
复制
.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%;}
代码语言:javascript
复制
<label class="switch">
  <input type="checkbox" id="mySlider">
  <span class="slider round"></span>
</label>
<div id="myDIV">Longer text</div>

票数 0
EN

Stack Overflow用户

发布于 2018-09-19 06:37:24

你的任务就快完成了。您所要做的就是将onClick回调添加到span中,并使用类slider round,如下所示:

代码语言:javascript
复制
<label class="switch">
  <input type="checkbox">
  <span class="slider round" onclick='myFunction()'></span>
</label>
票数 0
EN

Stack Overflow用户

发布于 2018-09-19 06:38:56

onclick需要放在input元素或span元素上,如下所示

代码语言:javascript
复制
<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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52395439

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档