Question

我有一个带有3个开关切换按钮的页面，前两个按钮激活一个动作（灯1打开和关闭，灯2打开和关闭），第三个按钮用于打开或关闭两个灯。因此，如果我打开按钮1和2，则应刷新第三个按钮并显示值。现在我只关闭第一个按钮并关闭灯1，第三个按钮应该刷新并显示值，因为并非所有灯都亮。刷新工作正常，但当刷新第三个按钮时，它还启动关闭两个灯的功能，灯1和灯2关闭（只有灯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);

OLD ANSWER：

您只需添加一些代码即可重新启用#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");                    
        }
    };
});

JQuery Flip切换无需操作即可刷新

2 个答案: