使用jQuery Spectrum颜色选择器调用Ajax时报getBrightness未定义错误如何解决

错误原因 #

该报错是因为直接将Spectrum回调返回的TinyColor实例对象作为参数传入AJAX请求的数据中，jQuery在序列化POST参数时会遍历该对象的所有内部属性，破坏了Spectrum对该实例的内部引用逻辑，导致后续Spectrum内部调用实例方法时抛出未定义错误。

修复步骤 #

你只需要调整自定义函数，将Color实例转为序列化的字符串后再传入AJAX参数即可，同时兼容allowEmpty: true的空值场景：

function my_function(color) {
    // 空值判断+转换为你需要的颜色字符串格式
    const formattedColor = color ? color.toRgbString() : '';
    jQuery.ajax({
        url: '/wp-admin/admin-ajax.php',
        type: 'POST',
        datatype: 'JSON',
        data: {
            action: 'update_data',
            color: formattedColor,
        },
        success: function(data) {
        }
    });
}

可选颜色格式转换方法 #

你可以根据业务需要替换toRgbString()为对应方法获取不同格式的颜色值：

• toHexString()：获取不含透明度的HEX格式，示例：#ff0000
• toHex8String()：获取含透明度的8位HEX格式，示例：#ff000080
• toHslString()：获取HSL格式，示例：hsl(0, 100%, 50%)
• toName()：获取颜色名（仅支持web标准命名色），示例：red

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