Question

在按钮上单击我在jquery ui的帮助下创建一个可拖动的div。创建的每个div都有一个textarea输入字段附加的文本。文本放在项目符号列表标签中。我遇到了这个问题：我想为<ul>标签内的所有内容动态设置背景颜色。我使用SPECTRUM作为颜色选择器。在按钮上单击而不是更改<ul>标记背景，它会更改整个div。我怎样才能更改<ul>背景而不是div？ JSFIDDLE

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

Answer 1

您可以这样使用：

$('#button').click(function (e) {
    $('<div />', {
        class: 'draggable ui-widget-content',
        text: $('textarea').val(),
        html:  '<ul>'+
                '<li>'+
                '<a href="#">'+
                '</a>'+
                '</li>'+$('textarea').val()+'</li>'+
                '</ul>',
        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)。更新了Fiddle。

$('#button').click(function (e) {
    $('<div />', {
        class: 'draggable ui-widget-content',
        text: $('textarea').val(),
        html:  '<ul style="background-color: ' + color + '">'+
                '<li>'+
                '<a href="#">'+
                '</a>'+
                '</li>'+$('textarea').val()+'</li>'+
                '</ul>',
        appendTo: '.middle-side',
        draggable: {
            containment: 'parent'
        }
    })
    .addClass('placement');
});

Answer 3

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

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

jsFiddle Demo

更改按钮上的<ul>背景颜色</ul>

3 个答案: