如何用同一jQuery代码实现多个百分比变化计算器？

核心思路是利用DOM元素的层级关系，通过触发事件的输入框定位到其所属的计算器组，再在组内获取对应的输入和结果元素，这样不管新增多少个计算器，都不需要修改JS代码。

修改后的HTML结构 #

把每个计算器的三个输入框包裹在一个容器中（比如用div.calculator-group），明确区分不同的计算器组：

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

<div class="calculator-group">
  <input type="text" class="ChangeCalulator From" value="" placeholder="初始值">
  <input type="text" class="To" value="25000" placeholder="当前值">
  <input type="text" class="Result" value="" placeholder="变化百分比" readonly>
</div>
<br><br>
<div class="calculator-group">
  <input type="text" class="ChangeCalulator From" value="" placeholder="初始值">
  <input type="text" class="To" value="25000" placeholder="当前值">
  <input type="text" class="Result" value="" placeholder="变化百分比" readonly>
</div>
<br><br>
<!-- 可无限新增该结构，无需修改JS代码 -->

优化后的jQuery代码 #

通过$(this)获取当前触发事件的输入框，用.closest()定位所属的计算器组，再在组内查找对应元素，彻底摆脱专属类名的限制：

$(document).on("change keyup blur", ".ChangeCalulator", function() {
  // 获取当前输入框所属的计算器组
  var $group = $(this).closest(".calculator-group");
  
  // 从组内读取对应数值
  var first = Number($group.find('.From').val());
  var second = Number($group.find('.To').val());
  
  // 计算百分比变化，处理初始值为0的异常情况
  var percentageChange = first !== 0 ? ((second - first) / first) * 100 : 0;
  
  // 将结果写入组内的结果输入框
  $group.find('.Result').val(Number(percentageChange).toFixed(2));
});

关键改进点 #

• 移除了每个计算器的专属类（如From101、To102），统一使用通用类名
• 用.closest()锁定当前操作的计算器组，确保计算只作用于当前组内元素
• 增加初始值为0的判断，避免出现除以0的报错
• 新增计算器仅需复制div.calculator-group结构，无需修改JS代码

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