Question

我使用的引导颜色选择器来自：http://www.eyecon.ro/bootstrap-colorpicker/

HTML代码：

<div class="well">
    <div class="input-append color" data-color="rgb(255, 146, 180)" id="cp3">
        <input type="text" class="span2" id="colorinput" value="" >
        <span class="add-on"><i style="background-color: rgb(255, 146, 180)"></i></span>
    </div>
</div>

<a href="#" id="external-link">Set Color</a>

外部链接的JavaScript代码：

$('#external-link').click(function(){
    //value = 'rgb(255, 255, 255)';
    value = '#ffffff';
    $('#colorinput').val(value);
    $('#colorinput').next().children().css('background-color',value);
    $('#cp3').colorpicker('setValue', value);
    $('#cp3').colorpicker('show');
    return false;
});

请在此处查看示例代码： http://jsfiddle.net/bimaljr/xtSrq/14/

我想从外部链接设置颜色选择器的颜色。当您单击“设置颜色”链接时，它将更改输入框的值和框的颜色。但是，在此之后，当您单击颜色框以打开colorPicker时，它将显示旧颜色。我想用“值”字符串中的颜色设置它。

目前它正在给出错误“无法调用方法'toLowerCase'的未定义”。我认为“value”字符串不是通过setColor（）或.colorpicker（'setValue'，value）函数传递的。

Answer 1

我认为这是colorpicker代码中的一个错误。当你致电.colorpicker('setValue', value)时。你的价值永远不会被使用。

第349行：

$.fn.colorpicker = function ( option ) {
    return this.each(function () {
        var $this = $(this),
            data = $this.data('colorpicker'),
            options = typeof option === 'object' && option;
        if (!data) {
            $this.data('colorpicker', (data = new Colorpicker(this, $.extend({}, $.fn.colorpicker.defaults,options))));
        }
        if (typeof option === 'string') data[option]();
    });

当您将此更改为（向函数添加第二个参数）时，您的问题似乎已得到解决：

$.fn.colorpicker = function ( option, value) {
    return this.each(function () {
        var $this = $(this),
            data = $this.data('colorpicker'),
            options = typeof option === 'object' && option;
        if (!data) {
            $this.data('colorpicker', (data = new Colorpicker(this, $.extend({}, $.fn.colorpicker.defaults,options))));
        }
        if (typeof option === 'string') data[option](value);
    });

从外部链接设置Bootstrap ColorPicker的颜色

1 个答案: