更改& lt; ul& gt;单击按钮的背景色 [英] Changing <ul> background color on button click

问题描述

在按钮上单击，我正在使用jQuery ui创建可拖动的div.创建的每个div都有一个从textarea输入字段附加的文本.文本放置在项目符号列表标记中.我遇到了这个问题:我想为<ul>标记内的所有内容动态设置背景颜色.我正在使用 SPECTRUM 作为颜色选择器.在按钮上单击，而不是更改<ul>标记背景，而是更改整个div.如何仅更改<ul>背景而不更改div? JSFIDDLE

On a button click I am creating a draggable div with the help of jquery ui. Each div created has text appended from a textarea input field. The text is placed in bulleted list tags. I am running into this problem: I want to set the background color dynamically for everything inside the <ul> tag. I am using SPECTRUM as the color picker. On the button click instead of changing the <ul> tag background it changes the whole div. How can I only change the <ul> background and not the 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');
});

推荐答案

您可以这样使用:

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

这篇关于更改& lt; ul& gt;单击按钮的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！