javascript - 拾色器设计和值继承到另一个 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);
}

我还没有测试过这个，但你应该明白这一点并走在正确的道路上。

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

<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);
}