如何让代码仅作用于匹配.title-hold下方的对应.flow-hold元素？

你的核心问题很明确：当前代码匹配到某个.title-hold时，会修改所有.flow-hold元素的样式，而不是当前标题紧跟着的那个目标元素。另外还有两个容易忽略的小问题：用parseInt处理带小数的数值会丢失精度，以及重复的循环代码导致维护成本高。

下面是优化后的完整解决方案：

步骤1：用配置对象整理规则（推荐） #

先把每个gauge的数值区间和对应颜色整理成一个配置对象，后续修改或新增规则会非常方便：

const gaugeRules = {
  gauge1: [
    { min: 0, max: 100, color: 'green' },
    { min: 101, max: 200, color: 'yellow' },
    { min: 300, max: 400, color: 'red' }
  ],
  gauge2: [
    { min: 0, max: 250, color: 'orange' },
    { min: 251, max: 345, color: 'pink' },
    { min: 346, max: 800, color: 'brown' }
  ],
  gauge3: [
    // 这里可以自定义gauge3的规则，示例如下：
    { min: 0, max: 300, color: 'blue' },
    { min: 301, max: 500, color: 'cyan' },
    { min: 501, max: 1000, color: 'gray' }
  ],
  defaultColor: 'purple' // 所有不匹配区间的默认颜色
};

步骤2：遍历标题并精准修改对应元素 #

遍历每个.title-hold，获取标题文本后，只定位到它下一个兄弟元素（也就是对应的.flow-hold）进行样式设置：

$('.title-hold').each(function() {
  const titleText = $(this).text().trim(); // 去除文本前后可能的空格
  const targetFlow = $(this).next('.flow-hold'); // 关键：只取当前标题后的目标元素
  if (!targetFlow.length) return; // 如果没有对应流量元素，直接跳过

  const flowValue = parseFloat(targetFlow.text().trim()); // 用parseFloat处理小数数值
  if (isNaN(flowValue)) {
    targetFlow.css('background-color', gaugeRules.defaultColor);
    return;
  }

  // 匹配对应的颜色规则
  let matchedColor = gaugeRules.defaultColor;
  const rules = gaugeRules[titleText];
  if (rules) {
    for (const rule of rules) {
      if (flowValue >= rule.min && flowValue <= rule.max) {
        matchedColor = rule.color;
        break;
      }
    }
  }

  targetFlow.css('background-color', matchedColor);
});

完整可运行代码 #

整合HTML、CSS和JS后的完整代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.title-hold {
  width: 100%;
  background: #000;
  clear: both;
  text-align: center;
  color: #fff;
  font-size: 18px;
}
.flow-hold {
  width: 50%;
  float: left;
  text-align: center;
  font-size: 18px;
}
</style>

<div class="title-hold">gauge1</div>
<div class="flow-hold">200</div>
<div class="title-hold">gauge2</div>
<div class="flow-hold">10.5</div>
<div class="title-hold">gauge3</div>
<div class="flow-hold">325.5</div>

<script>
const gaugeRules = {
  gauge1: [
    { min: 0, max: 100, color: 'green' },
    { min: 101, max: 200, color: 'yellow' },
    { min: 300, max: 400, color: 'red' }
  ],
  gauge2: [
    { min: 0, max: 250, color: 'orange' },
    { min: 251, max: 345, color: 'pink' },
    { min: 346, max: 800, color: 'brown' }
  ],
  gauge3: [
    { min: 0, max: 300, color: 'blue' },
    { min: 301, max: 500, color: 'cyan' },
    { min: 501, max: 1000, color: 'gray' }
  ],
  defaultColor: 'purple'
};

$('.title-hold').each(function() {
  const titleText = $(this).text().trim();
  const targetFlow = $(this).next('.flow-hold');
  if (!targetFlow.length) return;

  const flowValue = parseFloat(targetFlow.text().trim());
  if (isNaN(flowValue)) {
    targetFlow.css('background-color', gaugeRules.defaultColor);
    return;
  }

  let matchedColor = gaugeRules.defaultColor;
  const rules = gaugeRules[titleText];
  if (rules) {
    for (const rule of rules) {
      if (flowValue >= rule.min && flowValue <= rule.max) {
        matchedColor = rule.color;
        break;
      }
    }
  }

  targetFlow.css('background-color', matchedColor);
});
</script>

关键改进点说明 #

• 精准定位元素：用$(this).next('.flow-hold')代替全局的$('.flow-hold')，确保只修改当前标题对应的流量元素。
• 处理小数数值：把parseInt改成parseFloat，避免像10.5这样的小数被错误转换为10，导致区间判断出错。
• 代码可维护性：用配置对象管理所有gauge的规则，新增或修改规则时不需要重复编写循环逻辑。
• 容错处理：添加了对无对应流量元素、数值非数字的情况处理，避免代码报错。

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