Javascript 让js区分div

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

JS:

$（文档）.ready（函数（）{
$（'tbtask'）.focus（）；
$（'btnaddtask'）。按钮（）；
$（'#tbTask'）.addClass（“ui角点全部”）；
$（文件）
.on（'click'，'btnaddtask'，函数（）{
var newTask=$（'#tbTask'）.val（）；
如果（newTask==“”）{
警报（“请输入任务！”）；
}
如果（新任务）{
随机颜色（）；
$（“#任务列表”）.append（“”+newTask+“”）；
}
$（'#tbtask'）.val（“”.focus（）；
})
函数RandomColor（）{
var color='#'；
变量字母=['000000'、'FF0000'、'00FF00'、'0000FF'、'FFFF00'、'00FFFF'、'FF00FF'、'C0C0C0']；
颜色+=字母[Math.floor（Math.random（）*letters.length）]；
document.getElementById（'tasklist'）.style.background=color；
}

也许可以试试这样的

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

$（文档）.ready（函数（）{
$（'tbtask'）.focus（）；
$（'btnaddtask'）。按钮（）；
$（'#tbTask'）.addClass（“ui角点全部”）；
$（文档）。在（'click'，'btnaddtask'，函数（）{
var newTask=$（'#tbTask'）.val（）；
如果（newTask==“”）{
警报（“请输入任务！”）；
}
如果（新任务）{
$（“#任务列表”）.append（“”+newTask+“”）；
$（'#tasklist.taskdiv:n最后一个孩子（1）'）.css（'background-color'，RandomColor（））；
}
$（'#tbtask'）.val（“”.focus（）；
});
函数RandomColor（）{
var color='#'；
变量字母=['000000'、'FF0000'、'00FF00'、'0000FF'、'FFFF00'、'00FFFF'、'FF00FF'、'C0C0C0']；
颜色+=字母[Math.floor（Math.random（）*letters.length）]；
返回颜色；
}

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

$（文档）.ready（函数（）{
//protip：缓存这个对象，这样你就不必一直搜索DOM了
var$tbtask=$（“#tbtask”）；
$tbtask.focus（）；
$tbtask.addClass（“ui角点全部”）；
$（'btnaddtask'）。按钮（）；
$（文档）。在（'click'，'btnaddtask'，函数（）{
var newTask=$（'#tbTask'）.val（）；
如果（！newTask）{
警报（“请输入任务！”）；
}否则{
//创建一个存储新DOM元素的变量
变量$newListItem=$(
'' + 
'' + 
新任务+
''
);
//在将新创建的列表项插入DOM之前，为其指定一种新颜色
$newListItem.css（'backgroundColor'，getRandomColor（））；
//在列表中插入我们丰富多彩的列表项
$（'#任务列表'）。追加（$newListItem）；
}
$tbtask.val（“”.focus（）；
});
函数getRandomColor（）{
var color='#'；
变量字母=['000000'、'FF0000'、'00FF00'、'0000FF'、'FFFF00'、'00FFFF'、'FF00FF'、'C0C0C0']；
颜色+=字母[Math.floor（Math.random（）*letters.length）]；
返回颜色；
}
});

您的方法是解决这一问题的一种可能的方法。现在不是用您现有的颜色随机选择颜色吗？有什么问题吗？感谢您的回复，它是为整个列表选择随机颜色，但我希望这样做，以便列表中的每个项目都获得随机背景颜色。您评论错了人

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

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