如何每隔一秒遍历元素并为每个独立div切换类？已尝试setInterval

先修正原代码的问题 #

你原代码里的const ball = container.querySelectorAll("div");是在创建div元素之前执行的，此时容器内还没有任何div，所以这个变量是空集合，完全没用，需要删掉。我们会在创建完所有div后再获取元素。

方案1：逐个轮播切换类（每隔一秒切换一个div的类，循环往复） #

这种方案会依次给每个div切换类，一秒切换一个，循环遍历所有div：

const container = document.querySelector(".container");
const colors = ["#FDB10B", "#FE8535", "#FD292F", "#B20000"];

// 创建带基础样式类的div
for (let i = 0; i < colors.length; i++) {
    const ball = document.createElement("div");
    ball.style.backgroundColor = colors[i];
    ball.classList.add("ball"); // 添加基础类用于选择和样式
    container.appendChild(ball);
}

// 获取所有创建好的div元素
const balls = container.querySelectorAll(".ball");
// 跟踪当前要切换的div索引
let currentIndex = 0;

// 设置定时器，每隔1秒执行一次切换
setInterval(() => {
    // 切换当前索引div的目标类（比如active）
    balls[currentIndex].classList.toggle("active");
    // 索引循环递增，超出长度后重置为0
    currentIndex = (currentIndex + 1) % balls.length;
}, 1000);

方案2：所有div同时切换类 #

如果需要每隔一秒，容器内所有div同时切换类，可以用遍历的方式实现：

const container = document.querySelector(".container");
const colors = ["#FDB10B", "#FE8535", "#FD292F", "#B20000"];

// 创建div元素
for (let i = 0; i < colors.length; i++) {
    const ball = document.createElement("div");
    ball.style.backgroundColor = colors[i];
    ball.classList.add("ball");
    container.appendChild(ball);
}

const balls = container.querySelectorAll(".ball");

// 每隔1秒遍历所有div，切换类
setInterval(() => {
    balls.forEach(ball => {
        ball.classList.toggle("active");
    });
}, 1000);

配套样式示例（可选） #

为了看到切换效果，可以添加以下CSS：

.container {
    display: flex;
    gap: 15px;
    padding: 20px;
}

.ball {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.active {
    transform: scale(1.3);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}

关键说明 #

• classList.toggle("类名")是核心方法：它会自动检测元素是否包含目标类，有则移除，无则添加，完美实现“切换”效果。
• 方案1中的(currentIndex + 1) % balls.length是实现循环索引的技巧，确保索引始终在0到balls.length-1范围内，不会越界。

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