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 回答