【发布时间】：2020-01-06 22:45:18
【问题描述】：
所以我在一周中的每一天都有一个开关，简单的 html 和 css。当开关被点击到开/关位置时，它会将事件发送到 jquery，然后将其发送到 PHP 以更新数据库。然后我查询该数据库以获取每天的值（1 表示开启，0 表示关闭）。
如何根据 PHP 中的 1 或 0 值更改开关的显示。例如：如果数据库中的值为 1，则应该显示 ::after css（绿色）。如果它是 0，那么 ::before 应该显示（灰色）。当然，用户可以通过单击开关简单地更改它。
这里是开关的代码：
if($row['monday'] == '1'){
echo'<div class="material-switch" style="margin-left:45%;">
<input id="mondaySelect" name="mondaySelect" type="checkbox"/>
<label for="mondaySelect" class="label-success"></label>
</div>';
}
Here is the CSS for the switch, the switch when selected changes to on position and green color, when clicked again goes grey to the off position.
.material-switch > input[type="checkbox"] {
display: none;
}
.material-switch > label {
cursor: pointer;
height: 0px;
position: relative;
width: 40px;
}
.material-switch > label::before {
background: rgb(0, 0, 0);
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
content: '';
height: 16px;
margin-top: -8px;
position:absolute;
opacity: 0.3;
transition: all 0.4s ease-in-out;
width: 40px;
}
.material-switch > label::after {
background: rgb(255, 255, 255);
border-radius: 16px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
content: '';
height: 24px;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
transition: all 0.3s ease-in-out;
width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
background: inherit;
opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
background: inherit;
left: 20px;
}
为了清楚起见，这是一张图片
【问题讨论】：
-
当前在打开或关闭开关时如何工作？你如何分配合适的班级？
-
@NawedKhan 开关只是用css打开和关闭，这里的所有代码都是开关打开或关闭的代码...它只是一个复选框，我使用jquery检查如果复选框被选中，则将该值发送到 php.ini。所有这些都很好，只需要知道从数据库中获取值后如何更改 CSS。因此，当复选框未选中时，有没有办法将框的 CSS 更改为 ::before 或 ::after 代码。
-
如果对应的值是1，就在输入中加入checked。developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…
-
@NawedKhan，是的，这行得通。哈哈，这完全是我的想法。过多考虑 CSS 中的 ::before 和 ::after。 :) 谢谢