如何更改显示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 {&nbsp; display: inline-block;&nbsp; cursor: pointer;&nbsp; background: orange;&nbsp; padding: 5px;&nbsp; margin: 30px;}.onoffswitch-inner::after {&nbsp; content: "DISAPPROVED";}.onoffswitch-inner::before {&nbsp; content: "APPROVED";&nbsp; display: none;}#onoff:checked ~ .switch-status .onoffswitch-inner::after {&nbsp; display: none;}#onoff:checked ~ .switch-status .onoffswitch-inner::before {&nbsp; display: inline-block;}<input type="checkbox" id="onoff"><div class="switch-status">&nbsp; <div>STATUS: <span class="onoffswitch-inner"></span></div>&nbsp; <div>&nbsp; &nbsp; <label for="onoff">&nbsp; &nbsp; &nbsp; <span class="onoffswitch-inner"></span>&nbsp; &nbsp; </label>&nbsp; </div></div>但 CSS 强烈依赖于你的标记。另一种方式，仅使用 JavaScript：let onoff = document.getElementById('onoff'); // checkbox idlet toggle = document.querySelectorAll('.toggle-txt');onoff.addEventListener('change', function() {&nbsp;&nbsp; // run function each time when checkbox is changing&nbsp; // this == the element, which run the function (here == checkbox)&nbsp; this.closest('.main-switch').classList.toggle('on');&nbsp; // find the closest parent with class '.main-switch'&nbsp;&nbsp;&nbsp; for (let i = 0; i < toggle.length; i++) {&nbsp; &nbsp; toggle[i].textContent = (this.checked) ? "APPROVED" : "DISAPPROVED";&nbsp; }&nbsp; // Google → Ternary operator.&nbsp; // (check the condition) ? (return value if true) : (value if false)&nbsp;&nbsp;&nbsp; // property 'checkbox.checked' always contains "true" or "false"&nbsp; //});label {&nbsp; display: inline-block;&nbsp; cursor: pointer;&nbsp; background: orange;&nbsp; padding: 5px;&nbsp; margin: 30px;&nbsp; user-select: none;}.main-switch {&nbsp; /* default switch */}.main-switch.on {&nbsp; background-color: #045acf;&nbsp; /* some CSS magic only for switching effect */}<div>STATUS: <span class="toggle-txt">DISAPPROVED</span></div><div>&nbsp; <label class="main-switch" for="onoff">&nbsp; &nbsp; <input type="checkbox" id="onoff">&nbsp; &nbsp; <span class="onoffswitch-inner toggle-txt">DISAPPROVED</span>&nbsp; </label></div>