Question

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

我有以下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)

Answer 1

答案是

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

一页上有多个颜色选择器，带有输入框的链接

1 个答案: