Question

我正在创建一个javascript应用程序，这是一个待办事项列表，用户可以在其中输入任务，它出现在下面的列表中，他们可以在这里重新排序任务或检查任务。我遇到的一个问题是，我希望创建的每个任务div都有不同的背景颜色。因为我有它，所以列表作为一个整体改变背景颜色，但不是单独的每个任务（我明白为什么会这样）我想知道是否有人有一个简单的解决方案，以便添加的每个任务具有不同的背景颜色（或者我在RandomColor函数中的颜色之间交替。）下面是相关的代码片段。

JS：

$(document).ready(function () {
    $('#tbtask').focus();
    $('#btnaddtask').button();
    $('#tbTask').addClass("ui-corner-all");
    $(document)

    .on('click', '#btnaddtask', function () {
        var newTask = $('#tbTask').val();

        if (newTask == "") {
            alert("Please enter a task!");
        }

        if (newTask) {
            RandomColor();
            $('#tasklist').append('<div class="taskdiv"><input type="checkbox" class="task" 
value="' + newTask + '" />' + newTask + '</div>');

        }
        $('#tbtask').val("").focus();
    })

function RandomColor() {
    var color = '#';
    var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0'];
      color += letters[Math.floor(Math.random() * letters.length)];
      document.getElementById('tasklist').style.background = color;
     }

Answer 1

也许尝试这样的事情......

$(document).ready(function () {
    $('#tbtask').focus();
    $('#btnaddtask').button();
    $('#tbTask').addClass("ui-corner-all");
    $(document).on('click', '#btnaddtask', function () {
        var newTask = $('#tbTask').val();

        if (newTask == "") {
            alert("Please enter a task!");
        }

        if (newTask) {
            $('#tasklist').append('<div class="taskdiv"><input type="checkbox" class="task" value="' + newTask + '" />' + newTask + '</div>');
            $('#tasklist .taskdiv:nth-last-child(1)').css('background-color', RandomColor());
        }
        $('#tbtask').val("").focus();
    });

function RandomColor() {
    var color = '#';
    var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0'];
    color += letters[Math.floor(Math.random() * letters.length)];

    return color;
}

Answer 2

我认为保罗有正确的想法。您想要从RandomColor（我将其重命名为getRandomColor，因为我认为函数应该是动词）返回一种颜色，并在将其插入列表之前使用该颜色设置新列表项的样式。这是一个类似的答案，但清理了一下（IMO）：

$(document).ready(function () {
    // protip: cache this object, so you don't have to keep searching the DOM
    var $tbtask = $('#tbtask');

    $tbtask.focus();
    $tbtask.addClass("ui-corner-all");

    $('#btnaddtask').button();

    $(document).on('click', '#btnaddtask', function () {
        var newTask = $('#tbTask').val();

        if (!newTask) {
            alert("Please enter a task!");
        } else {

            // create a variable that stores the new DOM element
            var $newListItem = $(
                '<div class="taskdiv">' + 
                    '<input type="checkbox" class="task" value="' + newTask + '" />' + 
                    newTask + 
                '</div>'
            );

            // Assign a new color to the newly created list item before we insert it into the DOM
            $newListItem.css('backgroundColor', getRandomColor());

            // Insert our colorful list item into the list
            $('#tasklist').append($newListItem);

        }
        $tbtask.val("").focus();
    });

    function getRandomColor() {
        var color = '#';
        var letters =['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0'];
        color += letters[Math.floor(Math.random() * letters.length)];

        return color;
    }
});

让js区分div

2 个答案: