为什么我的 Jquery if/click 函数不工作？答案

【问题标题】：Why isn't my Jquery if/click function working?为什么我的 Jquery if/click 函数不工作？
【发布时间】：2022-12-08 09:38:47
【问题描述】：

我有一个非常小的点击游戏。游戏中有工人计数，但只有收集到10个以上的食物才能招募工人。我相信你们都熟悉这个概念。但是，无论我尝试什么，决定您是否可以购买工人的“if”语句都不起作用。据我所知，我的语法很好，格式也很好。还有其他问题吗？

$(document).ready(function() {
  woodCount = 0;
  stoneCount = 0;
  foodCount = 0;
  population = 0;

  woodAdd = 1;
  stoneAdd = 1;
  foodAdd = 1;
  populationAdd = 1;

  woodWorkers = 0;
  stoneWorkers = 0;
  foodWorkers = 0;
  unemployed = 0;

  $(".wood-gather").click(function() {
    woodCount = woodCount + woodAdd;
  });
  $(".stone-gather").click(function() {
    stoneCount = stoneCount + stoneAdd;
  });
  $(".food-gather").click(function() {
    foodCount = foodCount + foodAdd;
  });

  if (foodCount >= 10) {
    $(".worker-recruit").click(function() {
      population = population + 1;
      unemployed = unemployed + 1;
      foodCount = foodCount - 10;
      console.log(population);
      console.log(foodCount);
      console.log(unemployed);
    });
  } //THIS IS THE PROBLEM CODE ^

  function CountAppend() {
    $("#WCount").remove();
    $("#WlabelDiv").append("<label for = 'woodGather' id = 'WCount'>Wood: " + woodCount + "</label>");
    $("#SCount").remove();
    $("#SlabelDiv").append("<label for = 'stoneGather' id = 'SCount'>Stone: " + stoneCount + "</label>");
    $("#FCount").remove();
    $("#FlabelDiv").append("<label for = 'foodGather' id = 'FCount'>Food: " + foodCount + "</label>");
    $("#UEM").remove();
    $("#unemployedWrap").append("<p id = 'UEM'>Unemployed: " + unemployed + "</p>");
  }
  var interval = self.setInterval(function() {
    CountAppend()
  }, 10);
});

button {
  margin: 10px;
}

.worker-recruit {
  position: relative;
  top: 68px;
  left: 75px;
}

#PlabelDiv {
  position: relative;
  top: 100px;
  margin-left: 10px;
}

.food-gather {
  position: absolute;
  top: 65px;
  left: 84px;
}

#FlabelDiv {
  position: relative;
  top: 2px;
  margin-left: 10px;
}

<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>

<div class="workerWrap">
  <div id="workerRecruitWrap">
    <div id="PlabelDiv"><label for="workerRecruit">Workers:</label></div>
    <button class="worker-recruit" value="Workers" name="workerRecruit">Recruit</button>
  </div>
  <div id="jobWrap">
    <div id="unemployedWrap" style="position: absolute; top: 120px; margin-left: 10px;">
    </div>
  </div>
</div>
<div class="foodWrap">
  <div id="foodGatherWrap">
    <div id="FlabelDiv"></div>
    <button class="food-gather" value="Food" name="foodGather">Gather</button>
  </div>
</div>

【问题讨论】：

if 语句应该在点击处理程序内部，而不是围绕它。你的 if 语句只在游戏开始时运行一次，在计数更新之前。所以它不会添加点击处理程序。
@Barmar 这是我犯过的最愚蠢的错误。感谢您修复它。
不要难过，我已经多次看到同样的错误。

标签： javascript html jquery css

【解决方案1】：

固定码。谢谢你，巴尔马尔。

$(document).ready(function() {
  woodCount = 0;
  stoneCount = 0;
  foodCount = 0;
  population = 0;

  woodAdd = 1;
  stoneAdd = 1;
  foodAdd = 1;
  populationAdd = 1;

  woodWorkers = 0;
  stoneWorkers = 0;
  foodWorkers = 0;
  unemployed = 0;

  $(".wood-gather").click(function() {
    woodCount = woodCount + woodAdd;
  });
  $(".stone-gather").click(function() {
    stoneCount = stoneCount + stoneAdd;
  });
  $(".food-gather").click(function() {
    foodCount = foodCount + foodAdd;
  });

  if (foodCount >= 10) {
    $(".worker-recruit").click(function() {
      population = population + 1;
      unemployed = unemployed + 1;
      foodCount = foodCount - 10;
      console.log(population);
      console.log(foodCount);
      console.log(unemployed);
    });
  } //THIS IS THE PROBLEM CODE ^

  function CountAppend() {
    $("#WCount").remove();
    $("#WlabelDiv").append("<label for = 'woodGather' id = 'WCount'>Wood: " + woodCount + "</label>");
    $("#SCount").remove();
    $("#SlabelDiv").append("<label for = 'stoneGather' id = 'SCount'>Stone: " + stoneCount + "</label>");
    $("#FCount").remove();
    $("#FlabelDiv").append("<label for = 'foodGather' id = 'FCount'>Food: " + foodCount + "</label>");
    $("#UEM").remove();
    $("#unemployedWrap").append("<p id = 'UEM'>Unemployed: " + unemployed + "</p>");
  }
  var interval = self.setInterval(function() {
    CountAppend()
  }, 10);
});

【讨论】：