为何首次点击+按钮无法增加input输入框的值？

问题现象 #

编写的数值更新脚本中，点击+按钮首次无效果，第二次及后续操作正常；点击-按钮从一开始即可正常工作。

代码示例 #

JavaScript代码 #

// click + button
$(".inc").click(function(){
  service = $(this).closest(".service-option-card");
  let quantity = getCurrentQuantity(service);
  let newQuantity = quantity+1;

  setNewQuantity(newQuantity, service);
  updatePrice(newQuantity, service);
});

// click - button
$(".dec").click(function(){
  service = $(this).closest(".service-option-card");
  let quantity = getCurrentQuantity(service);
  let newQuantity = quantity-1;

  if(newQuantity <= 0) {
    let newQuantity = 0
    setNewQuantity(newQuantity, service);
  } else {
    setNewQuantity(newQuantity, service);
  }

  updatePrice(newQuantity, $(this).closest(".service-option-card"));
});

// Get current number
function getCurrentQuantity(service) {
  let quantity_str = service.find(".quantity").val();
  quantity_num = Number(quantity_str);
  return quantity_num;
}

// Set new Number
function setNewQuantity(quantity, service) {
  service.find(".quantity").val(quantity);
}

// Update Price
function updatePrice(quantity, service) {
  var price = parseInt(service.find(".price").val().replace(/,/g, ""));
  var total = quantity * price;

  if(total < 0) {
    total = 0;
  }
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="service-option-card" data-monthly="10">                             
  <div class="quantity">
    <button class="btn btn-quantity dec">-</button>
      <input class="quantity-input quantity" value="1">
    <button class="btn btn-quantity inc">+</button>
  </div>
</div>

问题根源 #

HTML结构中，包裹按钮与输入框的外层<div>和内部<input>都使用了quantity类。在getCurrentQuantity和setNewQuantity函数中，使用service.find(".quantity")查找元素时，jQuery会按文档顺序匹配所有符合条件的元素，第一个匹配到的是外层div而非目标input：

• 首次点击+按钮时，getCurrentQuantity获取到div的val()为undefined，转成数字后是0，加1得到1，设置到input时与初始值1一致，因此看起来无效果。
• 点击-按钮时，首次获取的数值也是0，减1得到-1，随后被修正为0，设置到input后从1变为0，视觉上符合预期，因此看似正常。

修复方案 #

修改元素选择器，精准定位到input元素，有两种方式可选：

方式1：使用input专属的quantity-input类 #

修改getCurrentQuantity和setNewQuantity函数中的选择器：

// Get current number
function getCurrentQuantity(service) {
  let quantity_str = service.find(".quantity-input").val();
  let quantity_num = Number(quantity_str); // 补充let声明，避免全局变量污染
  return quantity_num;
}

// Set new Number
function setNewQuantity(quantity, service) {
  service.find(".quantity-input").val(quantity);
}

方式2：保留quantity类，指定元素类型 #

通过input.quantity精准匹配输入框：

// Get current number
function getCurrentQuantity(service) {
  let quantity_str = service.find("input.quantity").val();
  let quantity_num = Number(quantity_str);
  return quantity_num;
}

// Set new Number
function setNewQuantity(quantity, service) {
  service.find("input.quantity").val(quantity);
}

额外优化：修复未声明变量的问题 #

原代码中存在未用let/var声明的变量（如service、quantity_num），会成为全局变量，潜在引发冲突，建议补充声明：

$(".inc").click(function(){
  let service = $(this).closest(".service-option-card"); // 补充let
  // ... 其余代码不变
});

$(".dec").click(function(){
  let service = $(this).closest(".service-option-card"); // 补充let
  // ... 其余代码不变
});

修复后效果 #

修改后，点击+按钮首次即可将input数值从1变为2，后续操作正常；点击-按钮也能正确从当前数值递减，避免了因选择器匹配错误导致的异常。

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