javascript - 如何在不同的 id 上更改具有相同输出的显示 css 切换开关？

Question

你好，我是编程新手，有点想在 proto.io 提供的自定义开关上获得相同的输出，我在如何使切换开关打印相同输出方面遇到了问题。

Java 有问题。

<footer id="change" class="blockquote-footer">STATUS: DISAPPROVED</footer>


<div class="onoffswitch" onclick="myFunction()"
                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
                    <label class="onoffswitch-label" for="myonoffswitch">
                        <span class="onoffswitch-inner"></span>
                        <span class="onoffswitch-switch"></span>
                    </label></div>  

CSS

.onoffswitch {
    position: relative; width: 133px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox {
    display: none; } .onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 38px; } .onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 15px; padding: 0; line-height: 15px;
    font-size: 10px; color: white; 
    box-sizing: border-box; } .onoffswitch-inner:before {
    content: "APPROVED";
    padding-right: 45px;
    background-color: #39C234; color: #FFFFFF; } .onoffswitch-inner:after {
    content: "DISAPPROVED";
    padding-right: 22px;
    background-color: #940909; color: #FFFFFF;
    text-align: right; } .onoffswitch-switch {
    display: block; width: 24px; margin: -4.5px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 114px;
    border: 2px solid #999999; border-radius: 38px;
    transition: all 0.3s ease-in 0s;  } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;  }

//这是javascript

 function myFunction() {   var x = document.getElementById("myonoffswitch");   var y = document.getElementById("change");   if (x.innerHTML === "APPROVED") {
    x.innerHTML = "APPROVED";
    y.innerHTML = "STATUS: APPROVED";   } else {
    x.innerHTML = "DISAPPROVED";
    y.innerHTML = "STATUS: DISAPPROVED";   } }

我正在尝试获得这样的输出。

before switch after switch

Answer 1

如果你从 CSS 开始，也可以用 CSS 完成一切)
简化示例:

label {
  display: inline-block;
  cursor: pointer;
  background: orange;
  padding: 5px;
  margin: 30px;
}

.onoffswitch-inner::after {
  content: "DISAPPROVED";
}
.onoffswitch-inner::before {
  content: "APPROVED";
  display: none;
}

#onoff:checked ~ .switch-status .onoffswitch-inner::after {
  display: none;
}
#onoff:checked ~ .switch-status .onoffswitch-inner::before {
  display: inline-block;
}

<input type="checkbox" id="onoff">

<div class="switch-status">
  <div>STATUS: <span class="onoffswitch-inner"></span></div>

  <div>
    <label for="onoff">
      <span class="onoffswitch-inner"></span>
    </label>
  </div>
</div>

但是 CSS 很大程度上取决于您的标记。
另一种方式，仅使用 JavaScript:

let onoff = document.getElementById('onoff'); // checkbox id
let toggle = document.querySelectorAll('.toggle-txt');

onoff.addEventListener('change', function() { 
  // run function each time when checkbox is changing
  // this == the element, which run the function (here == checkbox)
  this.closest('.main-switch').classList.toggle('on');
  // find the closest parent with class '.main-switch'
  
  for (let i = 0; i < toggle.length; i++) {
    toggle[i].textContent = (this.checked) ? "APPROVED" : "DISAPPROVED";
  }
  // Google → Ternary operator.
  // (check the condition) ? (return value if true) : (value if false)
  
  // property 'checkbox.checked' always contains "true" or "false"
  //
});

label {
  display: inline-block;
  cursor: pointer;
  background: orange;
  padding: 5px;
  margin: 30px;
  user-select: none;
}

.main-switch {
  /* default switch */
}

.main-switch.on {
  background-color: #045acf;
  /* some CSS magic only for switching effect */
}

<div>STATUS: <span class="toggle-txt">DISAPPROVED</span></div>

<div>
  <label class="main-switch" for="onoff">
    <input type="checkbox" id="onoff">
    <span class="onoffswitch-inner toggle-txt">DISAPPROVED</span>
  </label>
</div>