您好，我是編程新手，有點(diǎn)想在 proto.io 提供的自定義開(kāi)關(guān)上獲得相同的輸出，我在如何使切換開(kāi)關(guān)打印相同的輸出方面遇到問(wèn)題。java 遇到問(wèn)題。<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; }我正在嘗試獲得這樣的輸出。切換前 切換后
1 回答
胡子哥哥
TA貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超6個(gè)贊
如果你從 CSS 開(kāi)始，也可以用 CSS 完成一切）
簡(jiǎn)化示例：
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 強(qiáng)烈依賴(lài)于你的標(biāo)記。
另一種方式，僅使用 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>
添加回答
舉報(bào)
0/150
提交
取消