点击元素后仅修改对应单个输入框值的前端技术问题求助

看起来你遇到的核心问题是依赖重复ID做选择器，导致点击按钮时误操作了所有匹配的输入框。我们可以通过利用DOM相邻关系替代ID选择，同时修复HTML中的ID重复问题来彻底解决这个问题。

问题根源分析 #

1. HTML ID重复违规：你的代码里，同一个商品的minus和plus按钮用了相同的id="{$sArticle.articleID}"，这违反了HTML规范（ID必须是页面唯一的），会直接导致DOM选择行为异常。
2. 选择器范围失控：通过.quantity + id的方式选输入框，当页面存在多个相同ID元素时，会意外匹配到所有带对应class的输入框，这就是“点一个按钮改所有框”的原因。

解决方案 #

我们抛弃依赖ID的选择逻辑，直接通过按钮的相邻DOM元素定位对应输入框，同时修复HTML的ID问题。

1. 修复后的HTML代码

把重复ID换成data-id属性（用来存商品ID，不破坏DOM唯一性），还给输入框加了data-min方便后续限制最小购买量：

<div> 
  <a class="minus" data-id="{$sArticle.articleID}"><i class="icon-minus-wide"></i></a> 
  <input class="quantityNum--input" name="sQuantity" type="text" value="{$sArticle.minpurchase}" data-min="{$sArticle.minpurchase}"> 
  <a class="plus" data-id="{$sArticle.articleID}"><i class="icon-plus-wide"></i></a> 
</div>

2. 更新后的JS代码

用jQuery的.prev()、.next()方法直接定位相邻输入框，确保只操作当前按钮对应的那一个：

// 处理加号按钮点击
$(document).on('click', ".plus", function () { 
  // 找到当前按钮的前一个兄弟元素（即对应输入框）
  const $targetInput = $(this).prev('input[name="sQuantity"]');
  let currentQty = Number($targetInput.val());
  
  // 避免非数字输入导致的错误
  if (!isNaN(currentQty)) {
    $targetInput.val(currentQty + 1);
  }
});

// 处理减号按钮点击（补充完整功能）
$(document).on('click', ".minus", function () { 
  // 找到当前按钮的后一个兄弟元素（即对应输入框）
  const $targetInput = $(this).next('input[name="sQuantity"]');
  let currentQty = Number($targetInput.val());
  const minPurchase = Number($targetInput.data('min'));
  
  // 限制不能小于最小购买量
  if (!isNaN(currentQty) && currentQty > minPurchase) {
    $targetInput.val(currentQty - 1);
  }
});

为什么这样改更靠谱？ #

• 精准无干扰：通过.prev()和.next()直接绑定按钮与相邻输入框，不管页面有多少组，点击哪个按钮只会操作它旁边的那个输入框。
• 符合规范：用data-id替代重复ID，既保留了商品ID的业务信息，又遵守了HTML的唯一性要求。
• 健壮性更强：加入了数值有效性判断和最小购买量限制，避免用户输入非数字或低于规则的数值。

内容的提问来源于stack exchange，提问作者can.duendar