colorpicker에서 선택한 배경색으로 div를 추가 하시겠습니까?

Question

필자는 입력 값을 div에 추가하는 appendbutton이있는 입력 필드가 있습니다. 이 jQuery를 colorpicker에 덕분에 나는 또한 '추적'느릅 나무 색상이 그래서 지금 APPEND 버튼을 클릭하면

$('#color1').val()

을 선택 할 수있어, 그것은 사업부에 일반 텍스트로 입력 값을 추가합니다. 하지만 내가 원하는 것은 다른 작은 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++; 

    }); 
});