Question

我安装了一个jQuery插件颜色选择器：colpick.js而我不知道如何在调色板中为圆形图标设置新颜色（刷新页面后元素的bg已更改，但调色板中的圆形图标仍处于默认颜色区域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 });
    }
    });

之前（我选择了一种新颜色和＆＃34;身体＆＃34;背景颜色已经改变）： 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
        });
    }
});

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

1 个答案: