如何优化根据span值动态设置div宽度的多if判断JS代码？

DevOps 小满

2026-5-15

优化动态设置宽度的实现方案

你的思路没问题，但多个if判断确实不够优雅，维护起来也麻烦，尤其是后续要添加更多数值对应关系的时候。这里有两个更优的实现思路，帮你简化代码：

方案一：使用映射对象（推荐，适配非线性对应关系）

把数值和对应的宽度用键值对的形式存在一个对象里，这样逻辑更集中，修改或新增规则都非常方便：

$('.progress-fill span').each(function() {
  // 先把span里的内容转成整数，避免字符串比较的潜在问题
  const percent = parseInt($(this).text().trim(), 10);
  
  // 定义数值与宽度的映射关系，后续新增直接加键值对即可
  const widthMap = {
    12: '100%',
    11: '92%',
    10: '83%',
    9: '75%',
    // 这里可以继续补充1-8对应的宽度规则
  };

  // 如果当前数值有对应的宽度规则，就设置父元素宽度
  if (widthMap.hasOwnProperty(percent)) {
    $(this).parent().css('width', widthMap[percent]);
  }
});

这个方案的优势：

代码结构清晰，所有规则都集中在widthMap里，可读性更强
避免了多层if嵌套，逻辑更简洁
后续要新增数值对应关系，只需要在widthMap里添加新的键值对，不用修改其他逻辑

方案二：线性计算宽度（适用于数值与宽度成比例的场景）

如果后续你的数值和宽度是线性对应的（比如12对应100%，1对应约8.33%），可以直接通过计算获取宽度，完全不用维护映射表：

$('.progress-fill span').each(function() {
  const percent = parseInt($(this).text().trim(), 10);
  // 计算对应的百分比：(当前数值 / 最大值12) * 100
  const width = `${(percent / 12) * 100}%`;
  $(this).parent().css('width', width);
});