附加一个由颜色选择器选择的背景颜色的div？

Question

我有一些带有附加按钮的输入字段，它将输入值附加到一个 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。最后一步是将其附加到侧边栏。

为了清楚起见，我把它分成了两个变量：

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

  });
});