拾色器设计和值继承到另一个 div

Question

我正在使用这个颜色选择器http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/ 它的史蒂文

虽然从文档中我将其用作

 $(document).ready(function() {

    $('#picker').farbtastic('#color');


  });

而html代码是`

`

我必须将它创建为两个独立的部门。我希望在输入中更改颜色十六进制值，但在另一个分区背景中显示颜色。

如果我这样使用它

<div id="colorpicker"></div>
    <input type="text" id="color" name="color" value="#123456" />
    <div id='color' ></div>

更新将在一个 id 中进行，因此在此唯一的输入将随颜色及其十六进制值而变化。 来自脚本http://acko.net/files/farbtastic/demo/farbtastic.js 它在函数中只需要一个参数，所以我想要这样，当分区的颜色改变时，颜色十六进制值应该在输入下更新。

Answer 1

您仍然不能使用具有相同 ID 的两个元素。它不是那样工作的。在脚本作者网页中，传入目标 ID 即可为您提供演示的确切功能。如果您进一步向下滚动，您可以在其中传递函数的说明。这就是你想要做的：

$('#colorpicker').farbtastic(setColors);

var setColors = function(color){
  $('#colorText').val(color);
  $('#colorBackground').css('background-color' : color);
}

我尚未对此进行测试，但您应该明白这一点并走在正确的道路上。

[更新] 我在小提琴中对此进行了测试，但它不起作用，尽管根据作者的文档是准确的。所以你可以做的是：

<div id="colorpicker"></div>
<input type="text" id="colorText" value="#123456" />
<div id="colorDiv">div<div>

两个单独的 ID，一个用于 div，一个用于文本，然后同时选择它们：

var domNodes = $('#colorDiv, #colorText');
$('#colorpicker').farbtastic(domNodes);

Here is the Fiddle

---

---

此外，如果您根本不希望输入具有背景颜色，您可以覆盖默认功能并做任何您想做的事情：

JSFiddle

$.farbtastic(colorpicker).linkTo(callBack);

function callBack(color) {
    $('#colorText').val(color);
    $('#colorDiv').css('background-color', color);
}