如何减少jQuery中判断差值颜色的if语句数量？

这是个很典型的多条件判断优化场景，咱们可以通过结构化的阈值-颜色映射表来替代一堆嵌套的if/else，代码会简洁很多，而且后续要新增或修改颜色档位也超级方便。

核心思路 #

1. 把所有阈值和对应的颜色整理成一个数组，按阈值从高到低排序（这样能优先匹配优先级更高的规则——比如差值>1300肯定也>700，但要优先用紫色而不是红色）
2. 计算两个输入框的差值后，先判断是否超过5000，直接对应“其他颜色”
3. 遍历映射表，找到第一个满足「差值 > 阈值」的项，取对应的颜色
4. 最后把颜色赋值给.result元素

完整代码示例 #

假设你的HTML结构是这样的：

<input type="number" id="input1" placeholder="Input1">
<input type="number" id="input2" placeholder="Input2">
<div class="result">差值颜色展示区</div>

对应的jQuery代码：

// 定义阈值-颜色映射表，按阈值从高到低排序（继续补全到4900对应的颜色即可）
const colorThresholdMap = [
  { threshold: 4900, color: 'indigo' },
  { threshold: 1300, color: 'purple' },
  { threshold: 1200, color: 'orange' },
  { threshold: 1100, color: 'yellow' },
  { threshold: 1000, color: 'white' },
  { threshold: 900, color: 'green' },
  { threshold: 800, color: 'blue' },
  { threshold: 700, color: 'red' }
];

// 监听输入框的输入/变化事件，实时计算并更新颜色
$('#input1, #input2').on('input change', function() {
  // 获取输入值，转为数字，空值默认0避免NaN错误
  const val1 = parseInt($('#input1').val()) || 0;
  const val2 = parseInt($('#input2').val()) || 0;
  const difference = val1 - val2;
  
  let targetColor = '#666'; // 默认颜色：差值<=700时使用

  // 先处理差值>5000的特殊情况
  if (difference > 5000) {
    targetColor = 'teal'; // 替换成你需要的"其他颜色"
  } else {
    // 从映射表中找到第一个符合条件的颜色
    const matchedRule = colorThresholdMap.find(rule => difference > rule.threshold);
    if (matchedRule) {
      targetColor = matchedRule.color;
    }
  }

  // 给.result元素设置颜色
  $('.result').css('color', targetColor);
});

优化亮点 #

• 可维护性强：后续要新增/修改阈值或颜色，直接修改colorThresholdMap数组就行，不用动逻辑代码
• 代码简洁：用Array.find()替代手动写一堆if/else，逻辑清晰可读性高
• 鲁棒性好：处理了输入为空的情况，避免NaN导致的计算错误
• 扩展性高：如果后续要加更多档位，只需要在映射表中追加新项即可

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