如何在两组文本之间进行切换更改？答案

【问题标题】：How to make a switch change between two sets of text?如何在两组文本之间进行切换更改？
【发布时间】：2018-09-18 22: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>

【问题讨论】：

请在所有内容之前将您当前的代码粘贴到 HTML 验证器中。有很多语法错误需要修复
您的代码确实有效，但您已将点击事件附加到 <switch> 元素（这不是一个有效的 html 元素，但导航器仍让其文本出现）。点击“选择你的长度”，你会看到。正如一些答案所说，您只需将点击事件附加到实际开关上，即下面的 <label> 元素（您的 css 将内容设置为开关）

标签： javascript html

【解决方案1】：

您只需要将监听器附加到输入更改

HTMLInputElementObject.addEventListener('input', function (evt) {
    myFunction();
});

假设“input”为 HTMLInputElementObject：

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>

【讨论】：

我已删除 Jquery。使用 jquery 的速记代码是 $("input").on("change",function(){myFunction()}) @icecub
我知道 jQuery 是如何工作的。当您的代码甚至没有使用它时，将它添加到您的答案中似乎很奇怪。我仍然认为使用事件侦听器对于 OP 来说可能有点太多了。他显然是个初学者。更不用说您的事件侦听器会在任何输入元素上触发。这可能会成为未来的一个问题

【解决方案2】：

你快完成了。您所要做的就是将onClick 回调添加到span 与slider round 类，如下所示：

<label class="switch">
  <input type="checkbox">
  <span class="slider round" onclick='myFunction()'></span>
</label>

【讨论】：

【解决方案3】：

你的 onclick 需要像这样在 input 元素或 span 元素上

<label class="switch">
  <input type="checkbox" onclick="myFunction()">
  <span class="slider round"></span>
</label>

我还为您清理了您的代码，因为您的样式标签在正文内，并且您有额外的正文标签，并且您的元素出于任何原因都在 html 标签之外。

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

【讨论】：

【解决方案4】：

您必须将 onclick 包含在 checkbox 中，并以this 作为参数。

<input type="checkbox" onclick='myFunction(this)'>

this 是检查复选框是否为checked 所必需的。如果为真则使用第二个文本，否则使用第一个文本。

多用途示例

var text = {
  1: ["Longer text", "Shorter text"],
  2: ["Another longer text", "Another shorter text"]
  // Add more
}

var output1 = document.getElementById("output");
var output2 = document.getElementById("output2");

function switchText(that, output, text) {
  switch (that.checked) {
    case true:
      output.innerHTML = text[1];
      break;
    default:
      output.innerHTML = text[0];
  }
}

function switchFirstText(that) {
  switchText(that, output1, text[1]);
}

function switchSecondText(that) {
  switchText(that, output2, text[2]);
}

.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%;
}

<!-- First checkbox -->

<div>Choose your length</div>

<label class="switch">
  <input onclick="switchFirstText(this)" type="checkbox">
  <span class="slider round"></span>
</label>

<div id="output">Longer text</div>

<br>
<hr>
<br>

<!-- Second checkbox -->

<div>Choose your length 2</div>

<label class="switch">
  <input onclick="switchSecondText(this)" type="checkbox">
  <span class="slider round"></span>
</label>

<div id="output2">Another longer text</div>

【讨论】：