JavaScript函数仅获取首个amount字段值问题：如何获取全部amount字段及对应amount_type并实现联动计算

我来帮你搞定这个问题！你当前的代码之所以只处理第一个.amount和.amount_type，是因为直接用$(".amount").val()只会获取第一个匹配元素的值，没有遍历所有对应的字段组。我们可以通过关联每个字段的父容器，精准定位每一组对应的amount和amount_type，从而实现批量处理。

问题分析 #

原代码的核心局限：

• $(".amount").val() 和 $(".amount_type").val() 仅返回第一个匹配元素的值，忽略了其他字段
• 没有建立amount与对应amount_type的关联，导致无法针对每组单独计算

修改后的代码实现 #

$("#payment_info").on("change", ".price", function() { 
  // 获取当前变化的price值，转成数字并处理空值/非数字情况
  var price = parseFloat($(this).val()) || 0; 
  
  // 遍历所有amount字段，逐个处理
  $(".amount").each(function() {
    var $currentAmount = $(this);
    // 找到当前amount对应的amount_type（基于共同父容器关联）
    var $relatedAmountType = $currentAmount.closest('.atype').find('.amount_type');
    var amountType = $relatedAmountType.val();
    var currentAmountValue = parseFloat($currentAmount.val()) || 0;
    
    // 仅当类型为Percentage且price不为0时执行计算（避免除以0错误）
    if (amountType === "Percentage" && price !== 0) {
      // 计算新的amount值，可根据需求调整小数位数
      var newAmount = (currentAmountValue * 100) / price;
      $currentAmount.val(newAmount.toFixed(2));
    }
  });
  
  console.log("已处理所有符合条件的amount字段");
});

关键改动说明 #

1. 遍历所有amount字段：用$(".amount").each()循环处理每一个amount元素，不再局限于第一个
2. 关联对应amount_type：通过closest('.atype')找到当前amount所在的父容器（你的ERB模板里.atype.col同时包含了amount和amount_type），再在容器内查找对应的type字段，确保每组字段一一对应
3. 健壮性处理：
   • 用parseFloat()将输入值转为数字，避免字符串运算错误
   • 增加price !== 0判断，防止出现除以0的NaN问题
   • 用toFixed(2)格式化计算结果，保留两位小数（可根据业务需求调整）

补充ERB模板优化 #

你的ERB代码里input的class属性写了两次，会导致属性被覆盖，建议合并：

= f.input :amount,label: f.index == 0 ? 'Amount' : false, placeholder: 'Amount', disabled: disable, input_html:{class:'maskme amount'}

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