如何避免JavaScript为多个div设置随机背景图时重复选择同一张图片

核心逻辑是创建临时候选图片数组，每取出一张图片就从临时数组中移除，从根源上避免重复抽取。

优化后代码 #

JavaScript 代码 #

var images = ['PK1.jpg','PK2.jpg','PK3.jpg','PK4.jpg','PK5.jpg','PK6.jpg','PK7.jpg','PK8.jpg','PK9.jpg','PK10.jpg','PK11.jpg','PK12.jpg','PK13.jpg','PK14.jpg',
'PK15.jpg','PK16.jpg','PK17.jpg','PK18.jpg','PK19.jpg','PK20.jpg','PK21.jpg','PK22.jpg','PK23.jpg','PK24.jpg','PK25.jpg','PK26.jpg','PK27.jpg',];

// 复制原数组作为候选池，不会修改原数组内容
let tempImages = [...images];
// 定义需要赋值的元素类名列表，后续增减容器只要修改这个数组即可
const imageClasses = ['.image01', '.image02', '.image03', '.image04'];

imageClasses.forEach(cls => {
    // 从当前候选池随机生成索引
    const randomIndex = Math.floor(Math.random() * tempImages.length);
    // 取出对应图片资源
    const selectedImg = tempImages[randomIndex];
    // 给对应元素赋值背景图
    $(cls).css({'background-image': `url(assets/${selectedImg})`});
    // 从候选池移除已经选过的图片
    tempImages.splice(randomIndex, 1);
});

额外优化建议 #

• 你当前HTML中4个div都使用了相同的id="image"，id属性在单页面中必须唯一，建议删除重复id或者调整为不同的id值
• 该方案默认要求images数组总长度≥4，即可保证每次抽取的4张背景图完全不重复，如果后续需要增加展示的容器数量，只要同步保证images数组长度大于等于容器数量即可

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