如何确保设置的下一个背景色不与上一次使用的重复？

首先注意：你的HTML代码存在ID重复的问题——HTML规范要求页面中每个元素的id必须唯一，多个元素共用同一个id会导致DOM选择器行为异常，也不符合标准，所以先修正这一点，移除重复的id="change"属性。

修正后的HTML代码 #

<div class="sus"></div>
<div class="sus"></div>
<div class="sus"></div>
<div class="sus"></div>
<div class="sus"></div>
<div class="sus"></div>

修改后的JavaScript代码 #

const colores = ["#7579CD", "#7593CD", "#75C8CD", "#75CDAD","#A175CD", "#CD7575"];

document.addEventListener("DOMContentLoaded", start);

function start() {
    const items = document.querySelectorAll(".sus");
    let lastColor = null; // 记录上一次使用的颜色

    items.forEach(item => {
        // 过滤掉上一次使用的颜色，生成可选颜色数组
        const availableColors = colores.filter(color => color !== lastColor);
        // 从可选数组中随机选一个
        const randomColor = availableColors[Math.floor(Math.random() * availableColors.length)];
        
        item.style.backgroundColor = randomColor;
        lastColor = randomColor; // 更新上一次颜色为当前使用的颜色
    });
}

关键逻辑说明 #

• 用lastColor变量保存上一个元素使用的颜色值；
• 每次给下一个元素选颜色时，先通过filter从颜色数组中排除lastColor，得到可选的颜色集合；
• 从可选集合中随机选取颜色，赋值给当前元素后，更新lastColor为当前颜色，确保下一个元素不会重复使用这个颜色。

这样就能保证相邻的.sus元素背景色不会重复。

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