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

【问题标题】：need help my switch that has to toggle 2 functions需要帮助我的开关，它必须切换 2 个功能
【发布时间】：2014-01-05 17:46:13
【问题描述】：

在过去的 2 天里，我一直在努力编写代码。而且我只是无法让我的按钮工作。该按钮用于控制继电器，应该在打开它的功能和关闭它的功能之间切换。好像卡在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()"/>

【问题讨论】：

为什么要通过jQuery 和 onclick属性在按钮上添加事件？
你可以在 jsfiddle jsfiddle.net 中发布 html 和 javascript 吗？

标签： javascript function button toggle

【解决方案1】：

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

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

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

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

看来您可以在事件处理程序中将它们全部添加并获取

$("#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);
});

【讨论】：

【解决方案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);
        }
    });
}

几乎没有测试过这段代码，抱歉。

【讨论】：