JavaScript jQuery - 复选框样式化为电源按钮并在重新加载网页时更新其状态时出现问题

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);

    }

    .button .fa {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 2em;
        color: #0c0c0c;
    }

    .button.on .fa {

        color: aqua;  
        text-shadow:  0px 0px 20px #ffffff, 
                      0px -3px 30px #01bbf8;
        }

这是Jquery向PLC发送数据的代码：

           var checkbox;
            nodes.forEach(function buttonStatus (buttonControl) {
                if (buttonControl.className == ("button on")) {
                    buttonControl.lastElementChild.checked = true;

                }
                buttonControl.addEventListener("click", function toggleSwitch() {
                    if (buttonControl.className === "button on") {
                        buttonControl.className = 'button off';
                    } else {
                        buttonControl.className = ("button on");
                    }

                    checkbox = buttonControl.lastElementChild;
                    checkbox.checked = !checkbox.checked;
                    url="IO.htm";
                    var ival = +checkbox.checked;
                    var sdata = checkbox.id;
                    //alert(ival);                      
                    sdata=escape(sdata)+'='+ival;
                    alert(sdata);

                    $.post(url,sdata,function(result,status){});

                }, false);
                });

当我点击电源按钮时，class = "button off" 变成 class = "button on" 电源按钮像我设计的那样发光。它将向 IO.htm 文件发送请求。请求如下所示：%22webdata.Start%22=1.

这是IO.htm：

<!-- AWP_In_Variable Name='"webdata".Start' --> {"Status" : ":="webdata".Start:"}

允许我将数据写入标签名称"webdata"。在PLC中启动。如果我向这个 IO.htm 文件发送一个请求 %22webdata.Start%22=1，然后标签 "webdata"。在 PLC 中启动将修改为 1，然后电机启动运行。 :="webdata".Start: 允许我查看标签 "webdata".Start 的状态。如果电机是运行，那么"Status" : 1.

这是 jQuery 将电机状态更新到我的 index.html 文件的代码：

$.ajaxSetup({ cache: false });
   setInterval(function() { 
   url="IO.htm";
   $.getJSON(url, function(result){
                            if(result["Status"]==0) {
                            $('#Status_Run').text("STOP");
                            }
                            else {
                            $('#Status_Run').text("RUNNING");
                            }
                        });
                    },1000);

如果 Status 为 1 那么在 <th id="Status_Run"> </th> 中会显示运行，否则会显示 Stop。

我的问题是当我点击电源按钮时，按钮发光，状态显示运行并且连接到 PLC 的电机也是运行。当我重新加载我的网页时，class = "button on" 现在 returns 到 class = "button off"，状态仍然显示运行当然，电机仍然运行。我想要的只是当我重新加载我的网页时，电源按钮必须保持其发光状态，同时状态显示运行。我找不到解决方案。

Answer 1

您应该使用会话存储来保持您的状态，打开或关闭。这样它就不会重置，直到您重新启动浏览器。例如：

sessionStorage.setItem("state", "off");

$(".button").on("click", function() {
  if (sessionStorage.getItem("state") == "off") {
    sessionStorage.setItem("state", "on");
    $(this).removeClass("off");
    $(this).addClass("on");
  } else {
    sessionStorage.setItem("state", "off");
    $(this).removeClass("on");
    $(this).addClass("off");
  }
}

Answer 2

首先，CSS class名字必须是一个单词，button on和button off是三个不同的class名字button 和 on / off 两种情况都重复 button。您应该改用 button-off 和 button-on。

话虽如此，当页面加载时，默认情况下会使用 button-off 样式“绘制”：

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

您需要创建一个函数，该函数将运行在页面加载完成后立即调用该函数来检查电机状态。检查电机状态后，您应该根据电机状态自动更新按钮复选框的状态。

JavaScript jQuery - 复选框样式化为电源按钮并在重新加载网页时更新其状态时出现问题

JavaScript jQuery - Problem with checkbox styled into power button and updating its state when reload webpage

html

javascript

css

jquery

plc