选择不同的背景颜色为按钮点击

Question

我有基本的点击功能，创建一个可拖动的div与文本附加到它。我已经完成的第二个功能是让用户为div选择背景颜色。我正在使用名为SPECTRUM的拾色器插件。问题是当为一个新的div选择一个新的背景颜色时，新的背景颜色被应用到先前创建的div上。我如何不断添加具有不同背景颜色的新div？ JSFIDDLE

/** Colorpicker spectrum configuration **/ 
$("#colorpicker").spectrum({ //spectrum config 
    showPaletteOnly: true, 
    color: 'blanchedalmond', 
    palette: [ 
     ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"] 
    ], 
    change: function(colorSelected) { 
     color = colorSelected.toHexString(); 
    } 

}); 

/** Add New Div with selected background **/ 
$('#button').click(function (e) { 
    $('<div />', { 
     class: 'draggable ui-widget-content', 
     text: $('textarea').val(), 
     appendTo: '.middle-side', 
     draggable: { 
      containment: 'parent' 
     } 
    }).addClass('placement'); 

    $('.draggable').css('background-color' , color); 
}); 

HTML

<ol> 
    <li><textarea rows="4" cols="50" placeholder="Type text to append to div!"></textarea> 
    </li> 
<li><label>Choose Div Background Color:</label> 
    <input type='text' id='colorpicker' /></li> 
<li><input type="button" id="button" value="Create Draggable Div" /> 
    </li> 
</ol> 
<div> 
    <div class="middle-side empty"></div> 
</div> 

Answer 1

在此行中：

$('.draggable').css('background-color' , color); 

你chaning 的background-color所有您可拖动的元素，它只能设置为新创建的元素。试试这个：

$('#button').click(function (e) { 
    $('<div />', { 
     class: 'draggable ui-widget-content', 
     text: $('textarea').val(), 
     appendTo: '.middle-side', 
     draggable: { 
      containment: 'parent' 
     } 
    }) 
    .css('background-color' , color) 
    .addClass('placement'); 
}); 

jsFiddle Demo。