Question

我有这个html代码

<p id = "line1"> You are in a field </p>
<button id = "btn1"> [ Go to cave ] </button>

以及此使用jQuery的JavaScript代码

var bar = 0;  
$(document).ready(function(){
    $("#btn1").click(function(){
        console.log("Going to cave entrance");
        bar = 1;
    });
    if (bar){
        console.log("At entrance");
        $("#line1").html("Go into cave?");
        $("#btn1").html("Yes!!");
     }
     else{
        console.log("I am error");
     }
 });

如您所见，我有一个将变量bar设置为1的按钮，以及一个等待bar设置为1的if语句。但是，当我单击该按钮时，if语句将永远不会执行。

变量栏设置为1，并且打印console.log("Going to cave entrance")，但不执行其他任何操作。

这就像执行卡在.click()函数中一样。

Answer 1

您的语句在加载中运行一次。

将if-else移动到btn click事件中

var bar = 0;

$(document).ready(function(){

    $("#btn1").click(function(){
        console.log("Going to cave entrance");
        bar = 1;
        if (bar){
            console.log("At entrance");
            $("#line1").html("Go into cave?");
            $("#btn1").html("Yes!!");

         }
         else{
            console.log("I am error");
         }
    });
 });

Answer 2

简而言之，您的if逻辑在DOM准备就绪后即开始运行（这在用户有机会单击您的按钮之前），因为您已将其直接放置在JQuery的文档中。功能：

$(document).ready(function(){
  // Anything here will execute one time, when the DOM is fully parsed
});

为使if逻辑在单击按钮后的某个时刻运行，需要将其放置在可以随时调用的函数中：

function testButton(){
  if (bar){
    console.log("At entrance");
    $("#line1").html("Go into cave?");
    $("#btn1").html("Yes!!");
  } else{
    console.log("I am error");
  }
}

但是，真正的问题是何时应运行此函数？单击按钮后立即运行该函数是没有意义的，因为在click事件处理程序中按钮，bar变量被手动设置为1。如果单击后立即调用测试功能，它将始终进入测试的true分支。

如果您想找到一种跟踪玩家所处位置的方法，一种更好的方法是设置一个这些位置的阵列并在用户四处移动时检查该阵列。

因此，最后，您需要像下面这样设置代码：

var visitedPlaces = [];  // Store visited places here

$(document).ready(function(){
  // When any of the location change buttons get clicked...
  $(".changeLocation").click(function(){
    // Extract the location from the data-* attribute of the clicked button 
    var newLocation = $(this).data("location");
    
    // Test to see if player has already gone here
    if (testLocation(newLocation)){
      console.log("You've already been to the " + newLocation + "!");
    } else {
      console.log("Entering " + newLocation + "!");
    }
    
    visitedPlaces.push(newLocation); // Record that player has been to cave
  });
});

// Call this function anytime you need to test the bar variable:
function testLocation(loc){
  // Check if the location is already in the array and return true/false as appropriate
  return (visitedPlaces.indexOf(loc) > -1) ? true : false;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id = "line1"> You are in a field </p>
<!-- Use data-* attributes to signal where the user is going -->
<button class="changeLocation" data-location="cave">[ Go to cave ]</button>
<button class="changeLocation" data-location="inn">[ Go to inn ]</button>
<button class="changeLocation" data-location="mountains">[ Go to mountains ]</button>

Answer 3

为if语句添加一个单独的函数，并在每次单击按钮时运行它，如下所示：

var bar = 0;

$(document).ready(function(){

    $("#btn1").click(function(){
        console.log("Going to cave entrance");
        bar = 1;
        checkBar();
    });
		
    function checkBar() {
      if (bar){
          console.log("At entrance");
          $("#line1").html("Go into cave?");
          $("#btn1").html("Yes!!");

       }
       else{
          console.log("I am error");
       }
   };

 });

<p id = "line1"> You are in a field </p>
<button id = "btn1"> [ Go to cave ] </button>

将值从我的.click（）函数传递给if语句

3 个答案: