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

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;  }我正在尝试获得这样的输出。切换前 切换后

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>