Добавляем div с цветом фона, выбранным цветным указателем?

Question

У меня есть поля ввода с appendbutton, которые добавляют входные значения в div. Благодаря этому JQuery colorpicker я также в состоянии «след» цвет которым выбран

$('#color1').val()

Так прямо сейчас, когда кнопка нажата Append, он добавляет входные значения в виде обычного текста в 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(); 
}); 

Мой вопрос к вам: Как я могу сделать это с ColorPicker?

Answer 1

Вы должны сначала добавить 'avatarDiv' и дать ему правильный цвет, и после этого вы добавите его в div. Последний шаг - добавить его к боковой панели.

я разделить его на две ПОСРЕДНИКОВ, чтобы было ясно:

$(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++; 

    }); 
});