JQuery Flip 切换刷新无操作

Question

我有一个带有 3 个开关切换按钮的页面，前两个按钮激活一个动作（灯 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

Answer 2

这是怎么回事？我没有进行大量错误测试，因此它可能无法正常工作...请告诉我您的想法。

http://jsfiddle.net/q2zJJ/3/

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

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