jQuery新手求助：实现按钮增减值及三个输入框求和显示

嘿，很高兴帮你搞定这个需求！作为jQuery新手，这个功能其实不难实现，我给你整理了一套完整的代码，还会一步步解释每个部分的作用，方便你理解～

第一步：搭建HTML结构 #

首先咱们先把页面的基础结构写好，包含三个可增减的输入项，以及一个显示总计的输入框：

<div class="quantity-group">
  <button class="btn-decrease">-</button>
  <input type="number" class="quantity-input" value="0" min="0">
  <button class="btn-increase">+</button>
</div>

<div class="quantity-group">
  <button class="btn-decrease">-</button>
  <input type="number" class="quantity-input" value="0" min="0">
  <button class="btn-increase">+</button>
</div>

<div class="quantity-group">
  <button class="btn-decrease">-</button>
  <input type="number" class="quantity-input" value="0" min="0">
  <button class="btn-increase">+</button>
</div>

<div class="total-section">
  <label>总计：</label>
  <input type="number" id="total-input" value="0" readonly>
</div>

第二步：编写jQuery逻辑 #

接下来就是核心的交互代码啦，咱们要实现两个功能：点击按钮增减数值，以及实时计算三个输入框的总和：

$(document).ready(function() {
  // 加号按钮点击事件
  $('.btn-increase').click(function() {
    // 找到当前按钮对应的输入框
    const $input = $(this).siblings('.quantity-input');
    // 获取当前值，转成数字（避免字符串拼接）
    let currentVal = parseInt($input.val());
    // 数值加1，然后赋值回去
    $input.val(currentVal + 1);
    // 更新总计
    updateTotal();
  });

  // 减号按钮点击事件
  $('.btn-decrease').click(function() {
    const $input = $(this).siblings('.quantity-input');
    let currentVal = parseInt($input.val());
    // 确保数值不会小于0（可以根据需求调整最小值）
    if (currentVal > 0) {
      $input.val(currentVal - 1);
      updateTotal();
    }
  });

  // 实时求和函数
  function updateTotal() {
    let total = 0;
    // 遍历所有数量输入框，累加数值
    $('.quantity-input').each(function() {
      total += parseInt($(this).val()) || 0; // 如果值为空，默认加0
    });
    // 将总和赋值给总计输入框
    $('#total-input').val(total);
  }
});

关键细节说明 #

• 用siblings('.quantity-input')定位按钮对应的输入框，这样不管你有多少个数量组，代码都能复用，不用给每个元素单独加ID
• 每次增减数值后立刻调用updateTotal()函数，确保总计实时更新
• 使用parseInt()把输入框的字符串值转成数字，避免出现"1+1=11"这种字符串拼接的错误
• 减号按钮加了currentVal > 0的判断，防止数值变成负数（如果你的场景允许负数，可以去掉这个判断）

这样你把这两部分代码放到你的页面里，就能实现你想要的功能啦～如果还有其他疑问，随时问哦！

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