javascript - 在拾色器调色板中更新新颜色

Question

我安装了一个 jQuery 插件 Color picker: colpick.js 但我不知道该怎么做为调色板中的圆形图标设置新颜色(刷新页面后，元素的背景发生了变化，但调色板中的圆形图标仍处于默认颜色区域color:'003a7d。它没有更新。)(但是，颜色选择器和cookie运作良好。)

这是我的代码: HTML :

<div id="picker"></div>

JS:

    if($.cookie('body_color')) {
        $('body,.livebgchanger ul li a').css('background-color', $.cookie('body_color'));        
    }
    else {
        $('body,.livebgchanger ul li a').css('background-color', '#003a7d');
    }
   $('#picker').colpick({
    flat:true,
    submit:0,
    layout:'full',
    color:'003a7d', //default color
    onChange:function(hsb,hex,rgb,el){
        $('body,.livebgchanger ul li a').css('background-color', '#' + hex);
        $.cookie('body_color', '#' + hex, { expires: 365 });
    }
    });

之前(我选择了一种新颜色并且“body”背景颜色已经改变): click to view image

刷新页面后:(正文背景颜色已更改，但圆形图标和调色板中的颜色在默认颜色区域) enter link description here

如何添加此选项并为调色板中的圆形图标设置新颜色？

对不起我的英语。谢谢

Answer 1

您正在对颜色选择器的默认值进行硬编码。您应该将 cookie 值提取到一个变量中，并使用它来设置背景和颜色选择器颜色。

var currColor = $.cookie('body_color') || '#003a7d'; 
$('body,.livebgchanger ul li a').css('background-color', currColor);          
$('#picker').colpick({
    flat: true,
    submit: 0,
    layout: 'full',
    color: currColor.substring(1), //skip the #
    onChange: function(hsb, hex, rgb, el) {
        $('body,.livebgchanger ul li a').css('background-color', '#' + hex);
        $.cookie('body_color', '#' + hex, {
            expires: 365
        });
    }
});