为何变量C会记录上一次背景色？jQuery随机颜色应用故障求助

数据老陈

2026-5-27

问题原因与解决方案

嗨，刚学jQuery遇到这种问题很正常，别着急～咱们来一步步拆解问题：

你遇到的核心问题是变量c总是拿到上一次的背景色，结合你给出的代码片段，大概率是因为你获取颜色的方式或时机有问题，我整理了最可能的原因和对应的解决办法：

1. 核心原因：依赖DOM读取样式的不确定性

你现在的逻辑是先给元素设置随机背景色，再从DOM元素里读取这个颜色赋值给c。但这里有两个坑：

浏览器会自动解析转换CSS颜色格式：比如你设置的rgb(255,0,0)，浏览器可能返回#ff0000，格式不一致容易让你误以为是“上一次的结果”；
单线程执行的微小延迟：JS执行和浏览器样式计算属于不同的任务队列，有时候设置样式后立即读取，可能拿到的还是未更新的旧样式值。

更关键的是：你完全不需要从DOM里读颜色！ 因为颜色是你自己生成的，直接保存生成的原始值就好，何必多此一举去DOM里取？

2. 修正后的代码（彻底解决问题）

直接在生成随机颜色时就保存值，跳过DOM读取的步骤，既高效又不会出错：

function getNum(min, max) { 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
}
function getColor(n) { 
    // 先生成并保存三个随机色值
    var r = getNum(0, 255);
    var g = getNum(0, 255);
    var b = getNum(0, 255);
    // 拼接成标准rgb格式字符串
    var newColor = `rgb(${r}, ${g}, ${b})`;
    // 设置元素背景色
    $(`.color${n}`).css("background-color", newColor);
    // 直接用生成的newColor作为变量c的值，这就是最新的颜色！
    var c = newColor;
    
    // 这里可以加你需要的后续操作，比如输出颜色值
    console.log("当前颜色：", c);
}