如何用同一jQuery函数实现每行独立的数量联动价格计算？

问题场景 #

页面有多行商品，每行带独立ID，同时包含类名为itemQty的数量输入框和itemPrice的价格输出框。需要实现：修改某行数量时，仅计算并更新该行的价格，但现有代码修改任意行都会只更新第一行价格。

原HTML代码 #

<div id="item1">
  <div><input class="itemQty" onchange="alterQty()"></div>
  <div><span class="itemPrice"></span></div>
</div>
<div id="item2">
  <div><input class="itemQty" onchange="alterQty()"></div>
  <div><span class="itemPrice"></span></div>
</div>

原jQuery函数 #

function alterQty() {
  var rowID = $('.itemQty.').parent().parent().attr('id');
  var rowQty = '#' + rowID + ' .itemQty';
  var rowPrice = '#' + rowID + ' .itemPrice';
  iQty = $(rowQty).val();
  var iRetail = "100"; //(For the sake of this question this doesn't matter yet)
  var itemPriceCalc = iRetail * iQty;
  $(rowPrice).text(itemPriceCalc);
};

问题根源 #

原函数里$('.itemQty.')（还多了个多余的点）是选择页面所有.itemQty元素，默认取第一个元素的父级父级ID，所以不管哪行触发事件，拿到的都是第一行的item1，自然只会更新第一行价格。

修改后的实现 #

1. 调整HTML的事件传递 #

把输入框的onchange事件改成传递当前触发元素：

<div id="item1">
  <div><input class="itemQty" onchange="alterQty(this)"></div>
  <div><span class="itemPrice"></span></div>
</div>
<div id="item2">
  <div><input class="itemQty" onchange="alterQty(this)"></div>
  <div><span class="itemPrice"></span></div>
</div>

2. 重写jQuery函数 #

利用传入的当前元素，精准定位到所在行，再在行内查找对应元素计算更新：

function alterQty(currentInput) {
  // 从当前输入框向上找到最近的商品行容器
  var $currentRow = $(currentInput).closest('[id^="item"]');
  // 行内获取数量值
  var inputQty = $currentRow.find('.itemQty').val();
  var unitPrice = 100; // 可替换为实际单价逻辑
  var totalPrice = unitPrice * inputQty;
  // 更新当前行的价格显示
  $currentRow.find('.itemPrice').text(totalPrice);
};

说明 #

• closest('[id^="item"]')会向上查找最近的ID以item开头的父元素，比多次调用parent()更健壮，后续HTML结构微调也不容易出错。
• 全程在当前行范围内查找元素，不会干扰其他行，完美实现每行独立计算的需求。

内容的提问来源于stack exchange，提问作者J.K.