获取实例调用方法？

Question

我目前正在尝试设置颜色选择器的值。 我正在使用这个颜色选择器： http : //mjolnic.github.io/bootstrap-colorpicker/

使用jquery将colorpicker绑定到html元素：

$('.sample-selector').colorpicker({ /*options...*/ });

它还有一些方法，例如：

.setColor(value)

如何获取colorpicker实例，以便可以调用方法？

我尝试了很多事情。 首先我初始化colorpicker：

$('#thecolor').colorpicker();

这可行。 但是我似乎找不到找到方法的方法：

$('#thecolor').colorpicker.toRGB()
$('#thecolor').toRGB()
$('#thecolor').colorpicker().toRGB()

等等。 它必须但确实很小：)

Answer 1

要从DOM获取colorpicker实例：

var cp = $('#thecolor').data().colorpicker;

颜色对象是一个属性：

cp.color.toRGB();

Answer 2

从bootstrap-colorpicker文档中，您可以像这样调用toRGB ：

$('#thecolor').colorpicker().on('changeColor', function(ev){
    console.log(ev.color.toRGB());
});

Answer 3

我认为您错过了这一行：

颜色对象方法

每个触发的事件都有一个颜色对象，供选择器内部使用。 该对象有几种有用的方法。

看下面的例子：

$('.my-colorpicker-control').colorpicker().on('changeColor', function(ev){
    bodyStyle.backgroundColor = ev.color.toHex();
});

因此无法从外部使用。 您可以尝试破解（未经测试）

$('.my-colorpicker-control').colorpicker().on('create', function(ev) {
    window.mycolorpicker = ev.color;
});

if (window.mycolorpicker) {
    window.mycolorpicker.setColor('...');
}

祝好运！

Answer 4

尝试这个：

var colorPicker = $("#thecolor").colorpicker();
$(colorPicker).toRGB(); // object method