Javascript 两个类上的颜色选择器Farbtastic同步

我想有一些输入和用户可以改变每个颜色。但是，每个输入都与其他一些类（如主体背景色或菜单背景色）同步

我希望能够使用FarbStatic颜色选择器更改颜色，它会影响输入和与输入同步的类/ID。怎么做？下面的示例将仅更改“colorwell”中的颜色，但如何将其他元素同步到#color1、#color2。。。分别地谢谢

 <script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $('#demo').hide();
    var f = $.farbtastic('#picker');
    //var p = $('#picker').css('opacity', 0.25);
    //var selected;
    $('.colorwell')
      .each(function () { f.linkTo(this);  })
      .focus(function() {
        //if (selected) {
        //  $(selected).css('opacity', 0.75).removeClass('colorwell-selected');
        //}
        f.linkTo(this);
        //p.css('opacity', 1);
        //$(selected = this).css('opacity', 1).addClass('colorwell-selected');
      });
  });
 </script>


<form action="" style="width: 500px;">
  <div id="picker" style="float: right;"></div>
  <div class="form-item"><label for="color1">Color 1:</label><input type="text" id="color1" name="color1" class="colorwell" value="#123456" /></div>
  <div class="form-item"><label for="color2">Color 2:</label><input type="text" id="color2" name="color2" class="colorwell" value="#123456" /></div>
  <div class="form-item"><label for="color3">Color 3:</label><input type="text" id="color3" name="color3" class="colorwell" value="#123456" /></div>

</form>

$（文档）.ready（函数（）{
$（'#demo'）.hide（）；
变量f=$.farbtastic（'#picker'）；
//var p=$（'#picker'）.css（'opacity'，0.25）；
//选择var；
$（“.colorwell”）
.each（函数（）{f.linkTo（this）；}）
.focus（函数（）{
//如果（选定）{
//$（选定）.css（'opacity'，0.75.）.removeClass（'colorwell-selected'）；
//}
f、 链接到（本）；
//p、 css（'opacity'，1）；
//$（selected=this）.css（'opacity'，1）.addClass（'colorwell-selected'）；
});
});
颜色1：
颜色2：
颜色3：

我不得不稍微修改farbtastic.js文件。。。基本上我添加了这一行：

$('.' + this.id).css('background-color',fb.color);

在原始脚本的第234行下面。它从当前选择的输入框中获取ID，并更改与ID相同类别的背景颜色。因此，使用farbtastic更改

#color1

也将更新

.color1

类别。如果要更改背景颜色以外的内容，可能需要自己修改farbtastic.js

在这里获得修改后的文件并查看