javascript - 没有 Action 的 JQuery Flip 切换刷新

Question

我有一个带有 3 个切换按钮的页面，前两个按钮激活一个 Action (灯 1 打开和关闭，灯 2 打开和关闭)，第三个按钮用于打开或关闭两个灯。因此，如果我打开按钮 1 和 2，则第三个按钮应该刷新并显示值。现在我只切换了第一个按钮并关闭了灯 1，第三个按钮应该刷新并显示关闭值，因为不是所有的灯都亮着。刷新工作正常，但是当它刷新第三个按钮时，它也启动了关闭两个灯的功能，灯 1 和两个都关闭了(只有灯 1 应该关闭)。我正在寻找一种刷新按钮的方法，而不启动单击按钮时启动的事件。这是我的开关切换按钮逻辑的 Javascript 代码:

$( "#flip1").change(function(){
  var value1 = $("#flip1").val();
  var value2 = $("#flip2").val();

  if (value1 == 1) {
      switchlight(1, "on"); // function for switching the lamp
      if (value2 == 1){
          $("#flip3").val("1").flipswitch("refresh"); // should be refreshed without action
      }
  }else{
      switchlight(1, "off");
      $("#flip3").val("0").flipswitch("refresh"); // should be refreshed without action
  };
});

$( "#flip2").change(function(){
  var value1 = $("#flip1").val();
  var value2 = $("#flip2").val();

  if (value2 == 1) {
      switchlight(2, "on"); // function for switching the lamp
      if (value1 == 1){
          $("#flip3").val("1").flipswitch("refresh"); // should be refreshed without action
      }
  }else{
      switchlight(2, "off");
      $("#flip3").val("0").flipswitch("refresh"); // should be refreshed without action
  };
});

$( "#flip3").change(function(){
  var value3 = $("#flip3").val();
  if (value3 == 1) {
    switchlight(1, "on");
    switchlight(2, "on");

    $("#flip1").val("1").flipswitch("refresh"); // should be refreshed without action
    $("#flip2").val("1").flipswitch("refresh"); // should be refreshed without action
  }else{
    switchlight(1, "off");
    switchlight(2, "off");

    $("#flip1").val("0").flipswitch("refresh"); // should be refreshed without action                 
    $("#flip2").val("0").flipswitch("refresh"); // should be refreshed without action
  };
});

谢谢你的帮助

Answer 1

更新:我 digged around一点，发现一个better way :

$( "#flip1").change(function(){
    var value1 = $("#flip1").val();
    var value2 = $("#flip2").val();

    if (value1 == 1) {
        if (value2 == 1){
            $("#flip3").val("1").flipswitch("refresh");
        }
    }else{
        // should be refreshed cause not both lamps are on status on, but should not refrssh the state of other buttons!
        $("#flip3").off('change').val("0").flipswitch("refresh").on('change', flip3change);
    };
});

$( "#flip2").change(function(){
    var value1 = $("#flip1").val();
    var value2 = $("#flip2").val();

    if (value2 == 1) {
        if (value1 == 1){
            $("#flip3").val("1").flipswitch("refresh");
        }
    }else{
        // should be refreshed cause not both lamps are on status on, but should not refrssh the state of other buttons!
        $("#flip3").off('change').val("0").flipswitch("refresh").on('change', flip3change);
    };
});

function flip3change() {
     var value3 = $("#flip3").val();
    if (value3 == 1) {
        $("#flip1").val("1").flipswitch("refresh");
        $("#flip2").val("1").flipswitch("refresh"); 
    }else{
        $("#flip1").val("0").flipswitch("refresh");
        $("#flip2").val("0").flipswitch("refresh");
    };
}

$( "#flip3").change(flip3change);

旧答案:

您只需添加一些代码来重新启用 #flip1 和 #flip2 更改处理程序中的开关:

$( "#flip1").change(function(){
    var value1 = $("#flip1").val();
    var value2 = $("#flip2").val();

    if (value1 == 1) {
        if (value2 == 1){
            $("#flip3").val("1").flipswitch("refresh");
        }
    }else{
        // should be refreshed cause not both lamps are on status on, but should not refrssh the state of other buttons!
        $("#flip3").val("0").flipswitch("refresh");
        $("#flip2").val(value2).flipswitch("refresh");
    };
});

$( "#flip2").change(function(){
    var value1 = $("#flip1").val();
    var value2 = $("#flip2").val();

    if (value2 == 1) {
        if (value1 == 1){
            $("#flip3").val("1").flipswitch("refresh");
        }
    }else{
        // should be refreshed cause not both lamps are on status on, but should not refrssh the state of other buttons!
        $("#flip3").val("0").flipswitch("refresh");
        $("#flip1").val(value1).flipswitch("refresh");
    };
});

$( "#flip3").change(function(){
    var value3 = $("#flip3").val();
    if (value3 == 1) {
        $("#flip1").val("1").flipswitch("refresh");
        $("#flip2").val("1").flipswitch("refresh"); 
    }else{
        $("#flip1").val("0").flipswitch("refresh");
        $("#flip2").val("0").flipswitch("refresh");
    };
});

Online Demo