1

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

尽管从文档中我将其用作

 $(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 它只需要一个函数参数，所以我想要这样，当分割的颜色改变时，颜色十六进制值应该在输入下更新。

4

1 回答 1

2

您仍然不能使用具有相同 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);

这是小提琴

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

JSFiddle

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

function callBack(color) {
    $('#colorText').val(color);
    $('#colorDiv').css('background-color', color);
}
于 2013-01-23T15:42:50.223 回答