如何统计指定类名下名称为blog_linkm_one[]的文本框数值总和

实现方案 #

你可以将查询范围限定在指定类名的容器内，封装为可复用函数，调用时传入不同容器类名即可拿到对应统计结果：

// 统计指定类名容器下 blog_linkm_one[] 文本框的数值总和
function calcSumByContainer(containerClass) {
  // 获取对应类名的容器，若容器不存在直接返回0
  const targetContainer = document.querySelector(`.${containerClass}`);
  if (!targetContainer) return 0;

  // 仅在目标容器范围内查询指定文本框
  const costInputs = targetContainer.querySelectorAll('input[name="blog_linkm_one[]"]');
  let sum = 0;

  costInputs.forEach(input => {
    const inputVal = parseFloat(input.value);
    // 兼容非数值输入场景，避免总和变为NaN
    sum += isNaN(inputVal) ? 0 : inputVal;
  });
  return sum;
}

调用示例 #

// 分别获取三个容器的统计结果
const sumDiv0 = calcSumByContainer('appending_div0');
const sumDiv1 = calcSumByContainer('appending_div1');
const sumDiv2 = calcSumByContainer('appending_div2');

// 按你的示例输入，sumDiv0输出为6，sumDiv1输出为20
console.log(sumDiv0, sumDiv1, sumDiv2);

补充说明 #

如果同一个类名对应多个容器，可修改函数内的容器查询逻辑为document.querySelectorAll，遍历所有同类名容器累加数值即可。

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