嵌套JavaScript对象循环时alt属性始终被赋值为最后索引对应值如何解决

1. HTML 要求元素 ID 全局唯一，你为所有添加按钮设置了相同的 id="addButton"，document.getElementById("addButton") 只能匹配到 DOM 中第一个/最后一个插入的同 ID 元素，无法匹配你当前点击的按钮。
2. 循环中使用 innerHTML += 拼接内容时，会先销毁容器内已有的全部 DOM 再重新生成新 DOM，上一轮循环给按钮设置的 alt 属性会被重置，只有最后一轮的属性设置会生效。
3. 补充小问题：你代码中取学生姓名用的是 .studentName，但你给出的课程对象结构里学生姓名字段是 firstName，不修正的话会读取到 undefined。同时 class 是 JS 保留关键字，不能直接用作变量名，建议改为 currentClass 之类的命名。

快速修改方案 #

直接将学生姓名作为参数传入点击回调函数，不需要依赖 ID 或 alt 属性取值，修改后代码如下：

// 假设你当前要渲染的课程存在currentClass变量里，替换你原代码的class变量
function loadStudents(){
    let page = document.getElementById('page');
    page.innerHTML = "";
    for(seatRow in currentClass.seating){
        for(index in currentClass.seating[seatRow]){
            let studentName = currentClass.seating[seatRow][index].firstName;
            // 直接把学生姓名作为参数传给点击函数
            page.innerHTML += `<p> Name:${studentName} <img src='addButImg.png' style="cursor:pointer" onclick='addStudentToGroup("${studentName}")'></p>`;
        }
    }
}

function addStudentToGroup(studentName){
    // 直接拿到对应学生姓名
    console.log(studentName);
}

更规范的实现方案 #

用 DOM 操作 API 创建元素，避免 innerHTML 拼接的安全隐患和性能问题，还可以直接拿到完整的学生对象方便后续扩展：

function loadStudents(){
    const page = document.getElementById('page');
    page.innerHTML = "";
    for(const seatRow in currentClass.seating){
        for(const index in currentClass.seating[seatRow]){
            const curStudent = currentClass.seating[seatRow][index];
            // 创建行容器
            const rowP = document.createElement('p');
            rowP.textContent = `Name: ${curStudent.firstName} `;
            // 创建添加按钮
            const addBtn = document.createElement('img');
            addBtn.src = 'addButImg.png';
            addBtn.alt = `添加${curStudent.firstName}`;
            addBtn.style.cursor = 'pointer';
            // 绑定点击事件，闭包直接持有当前学生对象
            addBtn.addEventListener('click', () => {
                addStudentToGroup(curStudent);
            });
            rowP.appendChild(addBtn);
            page.appendChild(rowP);
        }
    }
}

// 直接接收学生对象，后续需要专业等其他属性也不用修改逻辑
function addStudentToGroup(student){
    console.log('添加学生：', student.firstName, '专业：', student.collegeMajor);
}

内容的提问来源于stack exchange，提问作者william