1

我正在使用jQuery ColorPicker 插件，我想在一个页面上多次使用它，并且每个颜色选择器框都必须连接到一个输入字段。

我有以下 HTML 代码

<div class="r" style="position: relative; height: 50px;">
  <div class="color-picker2">
    <div></div>
    <input type="text" name="idesign-menu-level-0[color]" id="colorpickerField" class="color-picker-input" value="" />
  </div>
  </div>

  <div style="clear:both"></div>

    <div class="r" style="position: relative;">
  <div class="color-picker2">
    <div></div>
    <input type="text" name="idesign-menu-level-0[color]" id="color" class="color-picker-input" value="" />
  </div>
  </div>

我有以下 jQuery 代码

(function($) {
    $('.color-picker2').each(function(o) {
        var _this = this;
        $(this).ColorPicker({
                livePreview: true,
                color: '#0000ff',
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {


                }
            });
    });
}) (jQuery)

我有 onChange 操作的代码，但我不知道如何将此更改链接到相关的输入字段。如果可能的话，如果十六进制代码也输入到输入字段中，我希望 ColorPicker 的颜色也会发生变化。

我确信有一种方法可以将这两者联系起来，但我只是不知道如何！

提前致谢

卡尔

没关系，现在只是用下面的 jQuery 代码弄清楚了

(function($) {
    $('.color-picker2').each(function(o) {
        var colorPicker = $(this);
        var colorPickerInput = $(this).children('input');
        $(this).ColorPicker({
                livePreview: true,
                color: '#0000ff',
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    $(colorPickerInput).val('#' + hex);
                }
            });
    });
}) (jQuery)
4

1 回答 1

3

答案是

(function($) {
    $('.color-picker2').each(function(o) {
        var colorPicker = $(this);
        var colorPickerInput = $(this).children('input');
        $(this).ColorPicker({
                livePreview: true,
                color: '#0000ff',
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    $(colorPickerInput).val('#' + hex);
                }
            });
    });
}) (jQuery)
于 2012-05-19T20:43:02.407 回答