将复选框样式设置为电源按钮并在重新加载网页时更新其状态的问题

Question

目前我正在做一个项目：通过网页控制电机。我的网页会将数据发送到S7 1200 PLC，然后由它控制电机。这是我的网页的样子：

当我单击电源按钮时，它将向PLC发送数据（如果它发送1，则PLC启动电机，否则电机将停止。电源按钮是一种复选框类型，我使用css将其样式设置为看起来像按钮。

这是我的主文件中电源按钮的html代码：index.html

<tr>

        <th align="left" style="text-align:justify" id ="start"> START MOTOR                        

        </th>

        <th class="button off"><span class = "fa fa-power-off"></span><input type="checkbox" id='"webdata".Start'/>

        </th>

    </tr>

这是html代码，用于显示电机的状态（如果它正在运行或未运行）：

<tr>

        <th align="left" style="text-align:justify">STATUS:                 

        </th>

        <th id="Status_Run">STOP                        

        </th>   

    </tr>

这是我的css来设置电源按钮的样式：

.button {

        float: right;

        position: relative;

        height: 55px;

        width: 55px;

        border-radius: 50%;

        cursor: pointer;

        box-shadow: -1px -1px 0px 3px rgb(34,34,34), 

                    0px 7px 20px 3px rgb(17,17,17), 

                    inset 0px 4px 2px 0px rgba(250, 250, 250, .2), 

                    inset 1px -9px 35px 3px rgba(0, 0, 0, .5);

        background-color: rgb(83,87,93);

        top: 1px;

        //color: #fff;

        //text-shadow: 0px 0px 3px rgb(250,250,250);

        outline: none;

        left: -13px;

        transform: translate3d(0,0,0);

        transition: 0.5s;

    } 

    .button input[type=checkbox] {

        -webkit-appearance: none;

    }

    .button.on {

        width: 55px;

        content: "";

        display: block;

        height: 55px;

        position: relative;

        border-radius: 50%;

        //-webkit-box-shadow: inset 0 1px 2px #F83953, inset 0 6px 1px 1px rgba(144, 59, 59,1);

        transform: translate3d(-2px,3px,0);

        transition: 0.5s;

        //top: -2px;

        background-color: rgb(83,87,93);

        box-shadow: 0px 0px 0px 0px rgb(34,34,34), 

                    0px 3px 7px 0px rgb(17,17,17), 

                    inset 0px 0px 0px 3px cyan, 

                    inset 0px -10px 35px 5px rgba(0, 0, 0, .5);

    }

Answer 1

应使用会话存储来保持状态为“打开”或“关闭”。这样，在您重新启动浏览器之前，它不会重置。例如：sessionStorage.setItem("state", "off");$(".button").on("click", function() {&nbsp; if (sessionStorage.getItem("state") == "off") {&nbsp; &nbsp; sessionStorage.setItem("state", "on");&nbsp; &nbsp; $(this).removeClass("off");&nbsp; &nbsp; $(this).addClass("on");&nbsp; } else {&nbsp; &nbsp; sessionStorage.setItem("state", "off");&nbsp; &nbsp; $(this).removeClass("on");&nbsp; &nbsp; $(this).addClass("off");&nbsp; }}

Answer 2

首先，CSS类名必须用一个单词表示，并且是三个不同的类名和/，在这两种情况下都是重复的。你应该使用和代替。button onbutton offbuttononoffbuttonbutton-offbutton-on话虽如此，当页面加载时，它将以默认样式“绘制”：button-off<th&nbsp;class="button-off"><span&nbsp;class&nbsp;=&nbsp;"fa&nbsp;fa-power-off"></span><input&nbsp;type="checkbox"&nbsp;id='"webdata".Start'/>您需要创建一个函数，该函数将在页面完成加载后立即运行，并将调用该函数以检查电机状态。检查电机状态后，您应该根据电机的状态自动更新按钮复选框的状态。