jQuery .each批量修改列背景色：部分列颜色未更新问题咨询

安全阿岳

2026-8-19

问题原因与解决方案

问题根源

你的randomColor()函数生成的颜色值可能无效，导致浏览器无法识别，所以部分列背景色没变化。

原函数逻辑是循环添加随机数的十六进制字符串直到长度为7（#+6位），但存在漏洞：Math.floor(Math.random() * 256).toString(16)可能生成1位字符（比如数字1转十六进制是"1"，而非"01"），循环过程中可能拼接出超过6位的字符（比如#1234567），或是格式不符合RGB十六进制规则的字符串，这类无效颜色值会被浏览器忽略，背景色自然不会更新。

修复后的代码

替换randomColor()函数，确保生成标准的6位十六进制颜色，同时补上原代码里缺失的语法符号：

function calculation() {
    $(".colorcolumn").each(function(i) {
        let hexrandomCol = randomColor();
        colors[i] = hexrandomCol;
        $(this).css("background-color", colors[i]);
    }); // 补上原代码缺失的分号
}

// 生成标准随机十六进制颜色
function randomColor() {
    // 生成RGB三个分量的0-255整数
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    // 转两位十六进制，不足补0后拼接
    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
}

// 空格键触发颜色变更
$("body").keyup(function (e) {
    if (e.keyCode == 32) {
        $(".save-palette").text("Save Palette");
        calculation(); 
    }
});