javascript - 如何在不同的 id 上更改具有相同输出的显示 css 切换开关?
问题描述
您好,我是编程新手,有点想在 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"; } }
我正在尝试获得这样的输出。
解决方案
如果你从 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>
推荐阅读
- javascript - MongoDB 返回一个不存在的对象
- sql - 连接表以根据多个条件返回 1 或 0
- jboss - JBoss 在 OpenShift 上跟踪 JDBC
- c++ - 调用 QVariant::toMap() 时如何避免创建副本?
- ruby - 如何通过 Sequel 检索存储在 postgresql 中的数组作为数组?
- html - 与内部 SVG 相比,为什么按钮高度上有额外的像素
- powershell - 替换代码签名证书后 PowerShell 模块更新失败
- javascript - 在数据链中使用空格
- r - 拟合具有不同类别数量的潜在轨迹模型并将模型保存在列表中
- javascript - 发送 dropzone 以及表单中的其他数据,而不指定每个输入字段