JavaScript/jQuery : Divs not changing background color on loop

Question

我目前正在开发一个应用程序，在该应用程序中，我从 API 调用数据以查看学生在在线日志中取得的进步。我正在使用 jQuery 为每个学生创建一个表格来显示他们的进度——基本上，如果学生完成了某个页面，将会有一个背景颜色现在为绿色的元素。

这是我正在使用的 API 类型的示例:

[
{ "userId": 101,
  "name": "Student1",
  "lastPageCompleted": 5 },
{ "userId": 102,
  "name": "Student2",
  "lastPageCompleted": 3 },
{ "userId": 103,
  "name": "Student3",
  "lastPageCompleted": 4 }
]

这是我目前正在使用的代码:

function getHighestPageCompleted() {
    $.ajax({
        url: "www.exampleapi.com/studentProgress",
        dataType: "json"
    }).done(function(data) {

        for (let i=0; i < data.length; i++) {
            let name = data[i].name;
            let lastPageCompleted = data[i].lastPageCompleted;
            let userId = data[i].userId;

            //here, the function loops through and creates tables with ids that match the userId, and td that haves classes of page1, page2, page3, page4, and page5
            let studentDashboard = ('<table id="' + userId + '"><tbody><tr><th>' + name + '</th><td class=\'page1\'></td><td class=\'page2\'></td><td class=\'page3\'></td><td class=\'page4\'></td><td class=\'page5\'></td></tr></table>');

            //in a separate HTML file, a class called 'dashboardContainer' receives the studentDashboards
            $(".dashboardContainer").append(studentDashboard);

            //here's the part that is tricking me up -- I need to change the background color of each td according to how many pages they've finished
            //this function is supposed to loop through each newly created table and color the background of each finished page div to green
            for (let k=0; k < lastPageCompleted; k++) {
                $("#" + userId + ".page" + k).css("background-color", "green");
            }
        }
    })
}

任何人都可以提供任何关于为什么这不起作用的指示或建议吗？我应该指出，当我在 Google Chrome 中尝试以下操作时，它确实有效。它只是在函数中不起作用。

$("#" + userId + ".page" + k).css("background-color", "green");

Answer 1

使用这个:

$("#"+ userId + ".page"+ k).css("background-color", "green");在 jquery 选择器中，类名以点 (.) 开头，并且您必须在父 ID 和子类名之间使用空格来区分它们。