alt 属性不断被分配给嵌套 javascript 对象的最后一个索引

Question

所以我有一系列代表大学 class 的各种 JSON 对象，每个对象中都有嵌套数据。这些对象中的每一个都存储在一个名为 classes 的数组中。下面是一个 class 对象如何格式化的示例：

let class_A = {
    professor: "Joey Smith",
    numberStudents: 25,
    courseCode: "COMS 2360",
    seating: {
        "FirstRow": {
            0: {
                firstName: "Sarah",
                collegeMajor: "English",
            },
            1: {
                firstName: "Bob",
                collegeMajor: "Computer Engineering",
            },
            2: { 
                firstName: "Dylan",
                collegeMajor: "Mathematics",
            }
        },
        "SecondRow": {
            3: {
                firstName: "Molly",
                collegeMajor: "Music"
            }
        }
    }
};

基本上，我有一个页面，其中所有 class 个对象的所有学生都布置在页面上，每个名字旁边都有一个添加按钮，添加按钮最终将允许我将学生添加到某些组作业等

现在只有 class_A 的页面看起来像这样：

我使用如下代码在每个学生旁边显示了学生姓名和添加按钮：

function loadStudents(){
    let page = document.getElementById('page');
    page.innerHTML = "";
    for(seatRow in class.seating){
        for(index in class.seating[seatRow]){
            let studentName = class.seating[seatRow][index].studentName;
            page.innerHTML += "<p> Name:" + studentName + " <img src='addButImg.png' id = 'addButton' onclick = 'addStudentToGroup()'></p>";
            let addButton = document.getElementById("addButton");
            addButton.alt = studentName;
            console.log(addButton.alt);
        }
    }
}

function addStudentToGroup(){
    let addButton = document.getElementById("addButton");
    console.log(addButton.alt);
}

我的页面像图片一样正确显示，但是当我单击学生姓名旁边的添加按钮时，我无法打印我添加到组中的特定学生的姓名。我将添加按钮的 alt 值分配给学生的名字，并通过执行“console.log(addButton.alt)”进行测试，打印出：

Sarah
Bob
Dylan
Molly

如果我点击第一个添加按钮，它应该会触发 addStudentToGroup() 函数并将“Sarah”打印到控制台。但是，无论按钮位于哪个学生旁边，单击所有按钮似乎只会打印学生列表中的姓氏“Molly”。 alt 似乎被保存为最后一个学生的名字，我正在努力根据我选择单击添加的任何学生姓名来更改 alt 值。有谁知道如何解决这一问题？如有任何帮助，我们将不胜感激！

Answer 1

问题是所有按钮都具有相同的 ID“addButton”，因此当您尝试获取 addStudentToGroup 中的按钮时，它会检索具有匹配 ID 的最后一项。

尝试将按钮的引用作为参数发送给 addStudentToGroup:

onclick = 'addStudentToGroup(this)'

尝试以下操作：

let classes = [class_A, class_B, class_C, class_D];
let classesAvailable = document.getElementById('classes');
let class = classes[classesAvailable.value];

function loadStudents(){
    let page = document.getElementById('page');
    page.innerHTML = "";
    for(seatRow in class.seating){
        for(index in class.seating[seatRow]){
            let studentName = class.seating[seatRow][index].studentName;
            page.innerHTML += "<p> Name:" + studentName + " <img src='addButImg.png' id = 'addButton' onclick = 'addStudentToGroup(this)'></p>";
            let addButton = document.getElementById("addButton");
            addButton.alt = studentName;
            console.log(addButton.alt);
        }
    }
}

function addStudentToGroup(buttonEl){
    console.log(buttonEl.alt);
}

Answer 2

您正在为所有图片分配相同的 ID addButton。如果你只想要 studentName 那么只需将它传递给 onclick 函数。比如使用 template literal addStudentToGroup('${studentName}')

let class_A = {professor:"Joey Smith",numberStudents:25,courseCode:"COMS 2360",seating:{"FirstRow":{0:{firstName:"Sarah",collegeMajor:"English",},1:{firstName:"Bob",collegeMajor:"Computer Engineering",},2:{firstName:"Dylan",collegeMajor:"Mathematics",}},"SecondRow":{3:{firstName:"Molly",collegeMajor:"Music"}}}};

loadStudents();

function loadStudents(){
    let page = document.getElementById('page');
    page.innerHTML = "";
    for(seatRow in class_A.seating){
        for(index in class_A.seating[seatRow]){
        //console.log(class_A.seating[seatRow][index]);
            let studentName = class_A.seating[seatRow][index].firstName;
            page.innerHTML += `<p> Name: ${studentName} <img src="addButImg.png" onclick = "addStudentToGroup('${studentName}')"></p>`;
            //let addButton = document.getElementById("addButton");
            //addButton.alt = studentName;
            // console.log(addButton.alt);
        }
    }
}

function addStudentToGroup(sname){
    console.log(sname);
}

<div id="page">
</div>

alt 属性不断被分配给嵌套 javascript 对象的最后一个索引

alt attribute keeps getting assigned to last index of nested javascript object

html

javascript

arrays

nested

onclick