Color Picker Farbtastic sync in 2 classes

Question

http://acko.net/dev/farbtastic

I would like to have multiple INPUTs, and users can change the color for each. However, each input is synchronized with some other classes (for example, the background color of the background or the background color of the menu).

I want to be able to change color using Farbtastic Color Picker, and it affects the BOTH INPUT and CLASS / ID, which are synchronized with INPUT. How to do it? In the example below, the color in "colorwell" only changes, but how to synchronize another C # color1, # color2 ... element separately? Thanks

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

Answer 1

farbtastic.js... :

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

234 script. , . #color1 farbtastic .color1. , farbtastic.js , - , .

farbtastic.js demo .