如何基于flow-hold div的数值为其设置不同背景颜色？

先看看你原代码里的几个问题，这些问题会导致代码无法正常工作：

• jQuery语法错误：你写的$('.flow-hold'), function(){ 是错误写法，逗号应该去掉，处理元素时要用合适的方法（比如.each()遍历，或者直接操作单个元素）
• 错误使用val()方法：val()是用来获取表单元素（如input、select）的值的，对于div这类普通元素，得用text()来获取它的文本内容
• 未转换数据类型：直接用文本字符串和数字比较会出问题（比如字符串"200"和"132"的比较逻辑和数字完全不同），需要把文本转换成数字再判断
• 批量修改的问题：如果页面上有多个.flow-hold元素，原代码会把所有元素都改成同一个颜色，应该针对每个元素单独判断值再设置颜色

下面是修正后的代码，分两种场景：

场景1：页面只有一个.flow-hold元素 #

<div class="flow-hold">132</div>
<script type="text/javascript">
// 获取元素的文本内容，转成数字
const flowValue = parseInt($('.flow-hold').text().trim(), 10);
// 根据数值设置背景色
$('.flow-hold').css('background-color', flowValue >= 200 ? 'red' : 'green');
</script>

场景2：页面有多个.flow-hold元素（逐个判断） #

<div class="flow-hold">132</div>
<div class="flow-hold">250</div>
<script type="text/javascript">
// 遍历每个.flow-hold元素
$('.flow-hold').each(function() {
  // 获取当前元素的文本，转成数字
  const flowValue = parseInt($(this).text().trim(), 10);
  // 给当前元素设置背景色
  $(this).css('background-color', flowValue >= 200 ? 'red' : 'green');
});
</script>

代码解释： #

• text().trim()：获取div的文本内容并去掉前后空格，避免因为空格导致转换数字失败
• parseInt(..., 10)：把文本转换成十进制的整数，确保数值比较的正确性
• 三元运算符condition ? val1 : val2：简化if-else的写法，让代码更简洁
• .each()：遍历所有匹配的元素，确保每个元素都能根据自己的数值设置对应的颜色

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