2 个班级的颜色选择器 Farbtastic 同步答案

【问题标题】：Color Picker Farbtastic sync on 2 classes2 个班级的颜色选择器 Farbtastic 同步
【发布时间】：2009-09-29 06:13:27
【问题描述】：

http://acko.net/dev/farbtastic

我想要一些 INPUT，用户可以为每个 INPUT 更改颜色。但是，每个输入都与其他一些类（如正文背景颜色或菜单背景颜色）同步。

我希望能够使用 Farbtastic 拾色器更改颜色，它会影响 INPUT 和与 INPUT 同步的 CLASS/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>

【问题讨论】：

标签： javascript jquery html css color-picker

【解决方案1】：

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

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

在原始脚本中的第 234 行下方。它从当前选定的输入框中获取 ID，并更改与 ID 相同的类的背景颜色。因此，使用 farbtastic 更改 #color1 也将更新 .color1 类。如果您想更改除背景颜色以外的其他内容，您可能需要自己修改 farbtastic.js。

在此处获取修改后的farbtastic.js 并查看demo here。

【讨论】：