如何将类名(row1)与ID(xyz)作为变量传入calculateSum方法？

架构老林

2026-5-27

解决方案：将选择器作为参数传入计算函数

嘿，这事儿好办！我们只需要把硬编码的类名和ID改成可传入的参数，让calculateSum函数变成通用的工具函数，同时调整事件绑定的逻辑来传递这些参数。

修改后的完整代码

$(document).ready(function(){
  // 先定义你要使用的类名和ID变量
  const targetClass = "row1";
  const targetId = "xyz";

  // 给目标类的每个元素绑定keyup事件
  $(`.${targetClass}`).each(function() {
    $(this).keyup(function(){
      // 调用计算函数时传入类名和ID参数
      calculateSum(targetClass, targetId);
    });
  });
});

// 重构calculateSum，接受类名和目标ID作为参数
function calculateSum(className, targetId) {
  let sum = 0;
  // 遍历传入类名对应的所有输入框
  $(`.${className}`).each(function() {
    // 只累加合法的数值
    if(!isNaN(this.value) && this.value.length !== 0) {
      sum += parseFloat(this.value);
    }
  });
  // 把结果更新到传入ID对应的元素里
  $(`#${targetId}`).html(sum.toFixed(2));
}

关键改动点

函数参数化：把原来固定写死的.row1和#xyz换成函数参数className和targetId，这样你可以随时传入不同的选择器，函数能复用在多组元素上。
事件传参技巧：在keyup事件里用匿名函数包裹calculateSum的调用——如果直接写calculateSum(targetClass, targetId)，页面加载时就会直接执行函数，而不是绑定事件到输入框上。
动态选择器：用ES6模板字符串（`.${className}`）把参数拼接成合法的jQuery选择器，确保能正确选中目标元素。