jQuery替换div文本异常：点击事件内无法重复更新内容

核心问题是变量作用域错误——你把countQB定义在click事件的回调函数内部了，导致每次点击draft按钮时，这个变量都会被重新重置为0，根本没法累加计数，自然.numLeft的文本只会显示一次正确值，后续都不对。

修复步骤很直接：

• 把countQB变量移到点击事件回调的外部，让它在页面加载时只初始化一次，每次点击只做累加操作：

  // 初始化计数变量，放在事件回调外面
  let countQB = 0;
  // 绑定点击事件（确保只绑定一次，比如放在ready函数里）
  $(document).ready(function() {
      const totalQB = 2; // 替换成你实际的总QB名额数
      $(".draft-btn").on("click", function() {
          countQB++;
          // 计算剩余数量并更新文本
          const remaining = totalQB - countQB;
          $(".numLeft").text(remaining);
      });
  });
  

• 额外排查点：

  • 打开浏览器控制台（F12），在点击按钮时打印countQB的值，确认它是否在正确累加；
  • 检查有没有其他代码意外修改了countQB或者覆盖了.numLeft的文本内容；
  • 如果你的draft按钮是动态生成的（虽然你说是硬编码，但还是提一下），要改用事件委托写法：$(document).on("click", ".draft-btn", function() { ... })

内容的提问来源于stack exchange，提问作者LauraNMS