如何使用cookie添加多个jquery颜色选择器实例答案

【问题标题】：how to add multiple instances of jquery colour picker with cookie如何使用cookie添加多个jquery颜色选择器实例
【发布时间】：2014-04-24 00:05:24
【问题描述】：

我正在使用 eyecon colorpicker.js 来编辑网站前端的颜色。该脚本按原样完美运行，但正在努力制作它的多个实例，因此我可以更改多个元素还需要一种将颜色重置为默认值的方法。

实现这一目标的最佳方法是什么？

<label>Body</label>
<div id="colorSelector">
 <div></div>
</div>

<script type="text/javascript">

$(document).ready(function(){
            var col = '000000';

            function updateCookieInfo(c){

                $("#colorSelector div").css("background-color", "#" + c);
                $("body").css("background-color", "#" + c);
            }

            if(typeof $.cookie('color') != 'undefined'){
                col = $.cookie('color');
                updateCookieInfo(col);
            }

            $('#colorSelector').ColorPicker({
                color: col,
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    $.cookie('color', col, { expires: 7 });
                    updateCookieInfo(col);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    col = hex;
                    $('body').css('backgroundColor', '#' + hex);
                    $("#colorSelector div").css("background-color", "#" + c);
                }
            });

        });
</script>

【问题讨论】：

标签： javascript jquery cookies colors picker

【解决方案1】：

我也花了几个小时试图解决这个问题，最后我放弃了，决定使用jscolor

它不像 eyecon 那样花哨，但对我来说效果很好 - 我需要在一个页面上使用 15 个不同的颜色选择器 - 至少网站上有一个包含少量示例的文档。

所以我知道它并不能真正回答您的问题，但它应该可以处理您要解决的问题。

【讨论】：