如何修改代码实现点击增减按钮仅单次调整数字并禁用按钮？

步骤1：修改HTML初始值 #

把每个.num标签的初始内容从0改为1，匹配需求里初始数字为1的要求。

步骤2：修改JavaScript逻辑 #

在更新数字后，根据当前数字和按钮类型，禁用对应的按钮：

• 点击+按钮后数字变为2时，禁用该+按钮
• 点击-按钮后数字变为0时，禁用该-按钮

修改后的完整代码 #

HTML代码

<div id="container">
  <div class="rating">
    <button class="countUp">+</button>
    <span class="num">1</span>
    <button class="countDown">-</button>
  </div>
  <div class="rating">
    <button class="countUp">+</button>
    <span class="num">1</span>
    <button class="countDown">-</button>
  </div>
</div>

JavaScript代码

const container = document.getElementById("container");
container.addEventListener('click', (e) => {
  const tgt = e.target.closest("button");
  if (!tgt || tgt.disabled) return; // 已禁用的按钮直接跳过
  const numSpan = tgt.closest(".rating").querySelector(".num");
  let num = +numSpan.textContent;
  num += tgt.classList.contains("countUp") ? 1 : -1;
  numSpan.textContent = num;

  // 达到阈值时禁用对应按钮
  if (tgt.classList.contains("countUp") && num === 2) {
    tgt.disabled = true;
  } else if (tgt.classList.contains("countDown") && num === 0) {
    tgt.disabled = true;
  }
});

关键修改说明 #

1. 初始值调整：HTML中把.num的文本改为1，满足需求的初始数字要求。
2. 禁用状态拦截：在事件处理开头增加tgt.disabled判断，避免已禁用按钮被重复触发。
3. 阈值触发禁用：更新数字后，检查当前操作的按钮类型和结果数字，达到目标值时设置按钮的disabled属性为true，阻止后续点击。

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