Jquery/Javascript：尝试使用布尔值停止后续 if 语句答案

【问题标题】：Jquery/Javascript: Trying to stop subsequent if statements using booleansJquery/Javascript：尝试使用布尔值停止后续 if 语句
【发布时间】：2018-11-21 06:46:25
【问题描述】：

我正在尝试使用布尔值来处理一些 if 语句。我的代码如下所示：

let found = false

function myFunction() {
  if (found === false) {
    ($('#character').click(function() {
      $('#redBox').animate({
        right: '-=700px'
      });
      $("#redBox").css({
        backgroundColor: "grey"
      });
      $('#blueBox').animate({
        right: '-=700px'
      });
      $("#blueBox").css({
        backgroundColor: "grey"
      });
      found = true;
    }));
  };
}
}
myFunction();
if (found === false) {
  ($('#redBox').click(function() {
    $('#character').animate({
      right: '-=700px'
    });
    $("#character").css({
      backgroundColor: "grey"
    });
    $('#blueBox').animate({
      right: '-=700px'
    });
    $("#blueBox").css({
      backgroundColor: "grey"
    });
    found = true;
  }));
};
}

我想要发生的是只运行一个或另一个 if 语句。因此，当我按下一个 div（即#character）时，布尔值变为真，防止另一个 if 语句运行。

然而，这并没有发生，即使布尔值变为真，未单击的 if 语句仍会运行。

感谢我能得到的任何帮助！

【问题讨论】：

你有一些额外的} 字符。
为什么你的 $(...).click() 函数有括号？

标签： javascript jquery html if-statement boolean

【解决方案1】：

问题在于您在条件内部定义了.click() 行为。

为了只允许单击一次，您需要做的是交换逻辑，并在.click() 处理程序的每个内为found 设置一个条件：

let found = false;

$("#character, #redBox").click(function() {
  if (found === false) {
    found = true;
    console.log("Clicked once");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="character">Character</div>
<div id="redBox">Red Box</div>

【讨论】：

知道了！谢谢！

【解决方案2】：

问题是在点击发生时分配了找到的变量。在那个时间点，您已经将两个事件侦听器绑定到元素，它们将一直留在那里直到被移除。如果您只希望发生一件事，则需要在单击中执行 if 语句。

    let found = false
function myFunction(){
    ($('#character').click(function(){
        if (found === false){
            $('#redBox').animate({right: '-=700px'});
            $("#redBox").css({backgroundColor: "grey"});
            $('#blueBox').animate({right: '-=700px'});
            $("#blueBox").css({backgroundColor: "grey"});
            found = true;
        }
    }));
}

myFunction();
($('#redBox').click(function(){
    if (found === false){
        $('#character').animate({right: '-=700px'});
        $("#character").css({backgroundColor: "grey"});
        $('#blueBox').animate({right: '-=700px'});
        $("#blueBox").css({backgroundColor: "grey"});
        found = true;
    };
}));

但是，如果我可以建议的话，一个更好/更清洁的结构可能是：

    var fired = false;
$('#redBox, #character').click(function(e){
    if(! fired){
        fired = true;
        if(this.id === "redBox"){
            $('#character').animate({right: '-=700px'});
            $("#character").css({backgroundColor: "grey"});
        }else{
            $('#redBox').animate({right: '-=700px'});
            $("#redBox").css({backgroundColor: "grey"});
        }
        $('#blueBox').animate({right: '-=700px'});
        $("#blueBox").css({backgroundColor: "grey"});
    }
});

此外，您可以一起摆脱 if 语句，并在第一次调用事件侦听器后删除它。这会对页面产生积极影响，因为您不再为将来的点击调用此函数。在这种情况下很少，但良好的做法都是一样的：

$('#redBox, #character').on('click', function(e){
    if(this.id === "redBox"){
        $('#character').animate({right: '-=700px'});
        $("#character").css({backgroundColor: "grey"});
    }else{
        $('#redBox').animate({right: '-=700px'});
        $("#redBox").css({backgroundColor: "grey"});
    }
    $('#blueBox').animate({right: '-=700px'});
    $("#blueBox").css({backgroundColor: "grey"});

    $('#redBox, #character').off('click');//remove the event from #redBox and #character
});

【讨论】：