JavaScript商品数量增减价格控件故障修复求助

问题根源分析 #

1. 价格计算逻辑错误：

   • 原代码里newPrice += newPrice是把当前价格翻倍，不是按初始单价累加；newPrice -= newPrice直接把价格归零，完全不符合需求的单价增减逻辑。
   • 正确逻辑应该是保存初始单价，总价格 = 初始单价 × 商品数量。

2. 数量下限未限制：

   • 点击减号按钮时没判断当前数量是否已经是1，导致数量会低于需求的最小值1。

3. 初始状态未正确初始化：

   • 页面加载后初始数量为1，但减号按钮没自动添加deactivated类，需要初始化时触发一次状态更新。

修复后的完整代码 #

HTML（无需修改） #

<main>
  <div class="prices">
    <div class="price_section">
      <div class="main_price">$ <span>10000</span></div>
      <div class="price_counter">
        <span class="btn minus_btn">&#x2796;</span>
        <span class="item_amt">1</span>
        <span class="btn plus_btn">&#x2795;</span>
      </div>
    </div>
    <div class="price_section">
      <div class="main_price">$ <span>4000</span></div>
      <div class="price_counter">
        <span class="btn minus_btn">&#x2796;</span>
        <span class="item_amt">1</span>
        <span class="btn plus_btn">&#x2795;</span>
      </div>
    </div>
    <div class="price_section">
      <div class="main_price">$ <span>850</span></div>
      <div class="price_counter">
        <span class="btn minus_btn">&#x2796;</span>
        <span class="item_amt">1</span>
        <span class="btn plus_btn">&#x2795;</span>
      </div>
    </div>
    <div class="price_section">
      <div class="main_price">$ <span>1635</span></div>
      <div class="price_counter">
        <span class="btn minus_btn">&#x2796;</span>
        <span class="item_amt">1</span>
        <span class="btn plus_btn">&#x2795;</span>
      </div>
    </div>
  </div>
</main>

CSS（无需修改） #

main {
  border: 1px solid #000;
  width: 300px;
  font-family: 'Segoe UI';
}

main div.prices {
  display: grid;
  grid-row-gap: 20px;
  justify-content: center;
  padding: 10px;
}

main div.prices div.price_section {
  text-align: center;
}

main div.prices>div div.main_price {
  font-size: 20px;
}

div.price_counter span.item_amt {
  font-size: 20px;
}

div.price_counter span.btn {
  cursor: pointer;
}

span.btn.deactivated {
  cursor: not-allowed;
  pointer-events: none;
}

JavaScript（修复后） #

let price_section = document.querySelectorAll('main div.prices div.price_section')

price_section.forEach(function(pr_sec) {
  let priceValue = pr_sec.querySelector('div.main_price span');
  let buttonMinus = pr_sec.querySelector('span.minus_btn');
  let buttonPlus = pr_sec.querySelector('span.plus_btn');
  let button = pr_sec.querySelectorAll('span.btn');
  let buttonText = pr_sec.querySelector('span.item_amt');

  // 保存初始单价，作为计算基准
  const originalPrice = Number(priceValue.textContent);
  // 初始数量设为1
  let index = 1;

  // 减号按钮点击事件
  buttonMinus.addEventListener('click', function() {
    // 限制数量不能低于1
    if (index > 1) {
      index--;
      updateText();
    }
  })

  // 加号按钮点击事件
  buttonPlus.addEventListener('click', function() {
    // 限制数量不能超过100
    if (index < 100) {
      index++;
      updateText();
    }
  })

  // 更新显示和按钮状态的函数
  function updateText() {
    // 更新数量显示
    buttonText.textContent = index;
    // 计算并更新总价格：初始单价 × 当前数量
    priceValue.textContent = originalPrice * index;

    // 更新按钮禁用状态
    switch (index) {
      case 1:
        buttonMinus.classList.add('deactivated');
        buttonPlus.classList.remove('deactivated');
        break;
      case 100:
        buttonPlus.classList.add('deactivated');
        buttonMinus.classList.remove('deactivated');
        break;
      default:
        button.forEach(el => el.classList.remove('deactivated'));
        break;
    }
  }

  // 初始化时调用一次，确保初始状态正确
  updateText();
})

关键修复点说明 #

1. 价格计算逻辑修正：

   • 新增originalPrice变量存储初始单价，总价格通过初始单价 × 数量计算，保证每次增减都是基于初始单价的正确变动，彻底解决了首次点击加号价格翻倍、减号价格归零的问题。

2. 数量范围限制：

   • 减号按钮点击时增加index > 1的判断，避免数量低于1；加号按钮增加index < 100的判断，避免数量超过需求上限。

3. 初始状态优化：

   • 在循环末尾调用updateText()，页面加载后自动给减号按钮添加禁用类，符合初始数量为1的需求。

4. 按钮状态修复：

   • 在switch分支中明确移除另一按钮的禁用类，避免出现两个按钮同时禁用的异常情况。

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