Question

过去两天我一直在努力处理我的代码。我只是无法让我的按钮工作。该按钮用于控制继电器，并应在打开它的功能和关闭它的功能之间切换。它似乎停留在relayOn函数

这是我的javascript：

var a = 1;

function relayOn() {
    hidden = document.getElementById("total");
    hidden.value = "on";
    form = document.getElementById("relay");
    form.method = "GET";
    form.action = "php.php";
    form.submit();
}

function relayOff() {
    hidden = document.getElementById("total");
    hidden.value = "off";
    form = document.getElementById("relay");
    form.method = "GET";
    form.action = "php.php";
    form.submit();
}

$("submitOn").on("click", Toggle);

function Toggle() {
    if (a == 1) {
        a = 2;
        relayOn()
    } else {
        a = 1;
        relayOff()
    }
}

这是按钮

<input type="button" id="submitOn" style=" top: 200px; border:1px solid #000; font-     size:40px;<?php background-color:green; " value="On" onClick="Toggle()"/>

Answer 1

ID选择器以#开头，你最好使用data()而不是全局

$("#submitOn").on("click", function() {
    var flag = $(this).data('flag');

    if ( flag ) {
        relayOff();
    } else {      
        relayOn();
    } 

    $(this).data('flag', !flag);
});

好像你可以在事件处理程序中将它全部添加到togheter中并获取

$("#submitOn").on("click", function() {
    var flag   = $(this).data('flag'),
        hidden = $('#total'),
        form   = $('#relay');

    hidden.val(flag ? 'off' : 'on');
    form.attr('method', 'GET');
    form.attr('action', 'php.php');
    form.get(0).submit();

    $(this).data('flag', !flag);
});

Answer 2

那样的东西？ http://jsfiddle.net/zubC6/

function relayOn(btn) {
    console.log("ON");
    $(btn).addClass('enabled').removeClass('disabled');
    $("#submitOn").attr('value', 'On');
}

function relayOff(btn) {
    console.log("OFF");
    $(btn).addClass('disabled').removeClass('enabled');
    $("#submitOn").attr('value', 'Off');
}

function toggle() {
    $("#submitOn").click(function() {
        if ($(this).hasClass('enabled')) {
            relayOff(this);
        } else {
            relayOn(this);
        }
    });
}

对这段代码进行了测试，对不起。

需要帮助我的开关必须切换2个功能

2 个答案: