在按钮单击时为 div 选择不同的背景颜色

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

您正在更改所有您的可拖动元素的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.