1

jQuery ColorPickerプラグインを使用していますが、これを1ページで複数回使用したいので、各カラーピッカーボックスを入力フィールドに接続する必要があります。

私は次の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アクションまでのコードはありますが、この変更を関連する入力フィールドにリンクする方法がわかりません。可能であれば、16進コードが入力フィールドにも入力されている場合は、ColorPickerの色を変更したいと思います。

これら2つをリンクする方法があると確信していますが、方法がわかりません。

前もって感謝します

カール

次の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 に答える