一個頁面上的多個顏色選擇器與輸入框的鏈接

我使用的是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)

來源

2012-05-18 Carl Thomas

如果你發現了回答，將其作爲一個整體發佈，這樣其他人可以稍後再找到它並從中受益。 –

對不起，這個更好？ –

答案是

(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-19 20:43:02

問題解決了。 Tnx很多:) – mindore

一個頁面上的多個顏色選擇器與輸入框的鏈接

回答

相關問題