JavaScript设置img元素ID导致图片缺失问题求助

我正在开发一款记忆游戏，需要给每张图片设置标识来追踪相同图片。原本生成随机图片网格的函数运行正常，但添加pic.id = ${num};代码后，出现部分图片随机缺失的情况。使用的数组是1-5各重复一次的随机数组（比如[1,3,2,5,5,3,2,1,4,4]）。

相关代码如下：

function placeImages(arr){
let place = 0;
let num = 0;
let box = 1;
for(let i = 0; i < 10; i++){
    num = arr[place];
    const pic = document.createElement('img');
    pic.id = `${num}`; // 问题所在
    // pic.setAttribute('id', `${num}`); // 给图片编号
    pic.classList.toggle('pic');
    pic.setAttribute('src', `./images/${num}.png`);
    document.getElementById(`${box}`).appendChild(pic); // 逐个盒子添加图片
    box++;
    place++;
    
}
console.log(arr);
}

问题原因 #

DOM规范要求页面中ID必须唯一。你的数组里每个数字会重复出现两次，比如数字1会被设置为两张图片的ID，重复ID会导致浏览器渲染或内部处理时出现冲突，最终表现为部分图片无法正常显示。

解决方案 #

有两种可行的解决思路：

1. 给ID添加唯一后缀：结合循环索引或盒子编号，确保每个图片的ID唯一，同时保留类别信息：

   pic.id = `pic-${num}-${box}`; // 用box编号做唯一标识，也可以用循环变量i
   

2. 使用自定义数据属性：如果只是需要标记图片的类别（用于追踪相同图片），不需要用ID，改用data-*自定义属性更合适，既不违反ID唯一性规则，也能满足业务需求：

   pic.dataset.picId = `${num}`;
   // 后续获取类别时，可通过element.dataset.picId读取
   

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