Question

我正在尝试使用布尔值来处理一些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）时，boolean变为true，阻止另一个if语句运行。

然而，这并没有发生，即使布尔值已经变为true，仍未运行if语句。

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

Answer 1

问题在于您定义条件的<{1}}行为。

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

＆＃13;

.click()

＆＃13;

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

＆＃13;

Answer 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
});

Jquery / Javascript：尝试使用布尔值

2 个答案: