追加一個由colorpicker選擇的背景顏色的div？

Question

我有一個appendbutton的輸入字段，它將輸入值附加到一個div。 由於這個jQuery colorpicker我也能「追蹤」至極的顏色選擇

$('#color1').val()

所以現在追加按鈕被點擊時，它附加在一個div以純文本的輸入值。但我想完成的是另一個小的div（化身）出現在顏色選擇器的選定顏色。讓我在JS中演示我的意思。

HTML：

<form> 
    <div> 
     <input type="text" name="price" id="price" value="price" /> 
     <input type="text" name="brand" id="brand" value="brand"/> 
     <br/> 
     <input type="radio" id="up" name="direction" value="up" /> up 
     <input type="radio" id="down" name="direction" value="down" /> down 
     <input type="radio" id="left" name="direction" value="left" /> left 
     <input type="radio" id="right"name="direction" value="right" /> right 
     <button id="addbutton">add it</button> 
     </div> 

</form> 
     <div><label for="color1">Color 1</label> 
<input id="color1" name="color1" type="text" value="#333399" /></div> 


<div id="sidebar"><h1>sidebar</h1></div> 

JS：

var counter = 0; 
$(document).ready(function(){ 

$('#addbutton').click(function() { 
    var $addDiv = $('#sidebar'); 
    $addDiv.append(
    $('<div></div>', { id: 'item' }) 
     .html($('#input1').val() + ' ' + $('#input2').val() + ' ' + $('input[name="category"]:checked').val() + ' ' +("<div id="avatar" backgound="color from colorpicker"></div>")+ ' ' +$('#color1').val())); 
    $('.removebtn').live('click', function() { 
     $(this).parent().remove(); 
    }); 
    return false 

}); 

$('#color1').colorPicker(); 
}); 

我對你的問題是：我如何才能做到這一點與顏色拾取？

Answer 1

您應該首先附加'avatarDiv'，並給它正確的顏色，然後將其附加到div。最後一步是將其附加到側邊欄。

我devided它分成兩個瓦爾，要清楚：

$(document).ready(function(){ 
    var counter=0; //should not be in global namespace... 
    $('#addbutton').click(function() { 
     var $avatarDiv = $('<div>').css('background-color',$('#color1').val()).css('height','16px').css('width','16px').css('float','left'); 
     var $addDiv = $('<div>', { id: 'item'+counter }).text('your input val').append($avatarDiv); 
     $('#sidebar').append($addDiv); 
    counter++; 

    }); 
});