使用JavaScript实现计分系统：记录选中元素data-id并生成结果

看起来你正在搭建一个用来记录选中元素data-id的系统（像是答题计分场景），我帮你补全并优化这段代码，让它能完整实现「记录选中项、标记选中状态、生成最终结果」的核心功能：

补全并优化后的完整代码 #

// 假设这些是全局或外部定义的变量，根据你的实际场景调整
let page = 0; // 当前页面/题目索引
let myObj = {}; // 存储选中数据的对象
let myQueRep = []; // 存储所有选中data-id的数组
let btn = document.querySelectorAll('.answer-btn'); // 获取所有可点击的选项按钮

function myAnswer() {
    // 启用下一页按钮
    document.getElementById('btnNxt').removeAttribute('disabled');
    
    // 获取当前点击元素的data-id
    const iId = this.getAttribute('data-id');
    
    // 记录选中的data-id到全局存储对象/数组
    myObj[page] = { mySel: iId };
    myQueRep[page] = iId;
    
    console.log('当前选中的data-id:', iId);
    
    // 更新按钮选中样式：给当前选中项加样式，移除其他项的选中样式
    btn.forEach((button) => {
        if (button.getAttribute('data-id') === iId) {
            button.classList.add('selAnswer');
        } else {
            button.classList.remove('selAnswer');
        }
    });
}

// 给所有选项按钮绑定点击事件
btn.forEach(button => {
    button.addEventListener('click', myAnswer);
});

// 生成最终结果的函数（比如提交时调用）
function generateFinalResult() {
    // 将所有选中的data-id组合成字符串或其他格式
    const finalResult = myQueRep.filter(id => id !== undefined).join(', ');
    console.log('最终选中的所有data-id:', finalResult);
    // 这里可以添加结果展示、提交等逻辑
    return finalResult;
}

关键代码解释 #

• 选中状态记录：通过this.getAttribute('data-id')获取点击元素的标识，分别存入myObj（按页面索引存储）和myQueRep（数组形式存储所有选中项），满足不同场景的读取需求。
• 视觉状态同步：遍历所有选项按钮，给当前选中项添加selAnswer类，移除其他项的该类，确保用户能直观看到选中状态。
• 下一页交互：点击选项后启用下一页按钮，贴合答题类场景的流程逻辑。
• 结果生成：generateFinalResult函数会过滤掉未选中的空值，将所有data-id拼接成字符串，方便后续展示或提交。

额外优化建议 #

• 如果需求允许，可以把data-id设置为数字类型，方便后续计分计算。
• 初始状态下可以给默认选中项（如果有的话）提前添加selAnswer样式，并初始化myQueRep和myObj对应的值。
• 可以给按钮添加防重复点击逻辑，避免短时间内重复触发事件。

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