按钮单击时更改背景颜色

在按钮上单击我在jquery ui的帮助下创建一个可拖动的div。 创建的每个div都有一个textarea输入字段附加的文本。 文本放在项目符号列表标签中。 我遇到了这个问题：我想为

标签内的所有内容动态设置背景颜色。 我使用SPECTRUM作为颜色选择器。 在按钮上单击而不是更改
标签背景，它会更改整个div。 我怎样才能改变
背景而不是div？ 的jsfiddle

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

Answer 1

你可以像这样使用：

 $('#button').click(function (e) { $('
', { class: 'draggable ui-widget-content', text: $('textarea').val(), html: '
'+ '
'+ ''+ ''+ '
'+$('textarea').val()+''+ '
', appendTo: '.middle-side', draggable: { containment: 'parent' } }) .find('ul') //find ul then apply css .css('background-color' , color) .end() // to go back to select the previous div and apply addClass .addClass('placement'); }); 

Answer 2

将style属性添加到ul元素，并删除.css('background-color' , color) 。 更新小提琴 。

 $('#button').click(function (e) { $('
', { class: 'draggable ui-widget-content', text: $('textarea').val(), html: '
'+ '
'+ ''+ ''+ '
'+$('textarea').val()+''+ '
', appendTo: '.middle-side', draggable: { containment: 'parent' } }) .addClass('placement'); }); 

Answer 3

您应该将background-color应用于ul ，而不是整个div ：

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

jsFiddle演示 。