Jquery 是否使用colorpicker选择的背景色附加一个div？

我有一些带有appendbutton的输入字段，它将输入值附加到div。 多亏了这个jQuery，我还能够“跟踪”所选的颜色

$（'#color1'）.val（）

因此，现在单击append按钮时，它会将输入值以纯文本形式附加到div中。但我想完成的是，另一个小div（avatar）以颜色选择器选择的颜色显示。让我在JS中演示我的意思

HTML:

向上的
向下
左边
正确的
加上
颜色1
边栏

JS:

var计数器=0；
$（文档）.ready（函数（）{
$（“#添加按钮”）。单击（函数（）{
var$addDiv=$（“#侧栏”）；
$addDiv.append(
$（''，{id:'项'}）
.html（$（'#input1'）.val（）++'+$（'#input2'）.val（）++'+$（'input[name=“category”]：checked'）.val（）++'+''（'#color1'）.val（））；
$（'.removebtn'）.live（'click'，function（）{
$（this.parent（）.remove（）；
});
返回错误
});
$（'#color1'）.colorPicker（）；
});

---

我的问题是：如何使用colorpicker实现这一点？

您应该首先附加“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++;

  });
});

$（文档）.ready（函数（）{
var counter=0；//不应位于全局命名空间中。。。
$（“#添加按钮”）。单击（函数（）{
变量$avatarDiv=$（''）.css（$（'background-color'，'color1'）.val（））.css（'height'，'16px'）.css（'width'，'16px'）.css（'float'，'left'）；
var$addDiv=$（''，{id:'item'+counter}）.text（'your input val'）.append（$avatarDiv）；
$（“#边栏”）.append（$addDiv）；
计数器++；
});
});

我可以问一下为什么不关闭jQuery中的div吗？您可以关闭div，也可以不关闭div，jQuery框架似乎可以帮您处理。您可以在

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();
});

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

  });
});