Javascript 在第二次验证时不起作用

我的代码应该在单击后将颜色切换为红色并返回，但它只工作一次

<div class="time-block">00:00 - 00:59</div>

00:00-00:59

“红色我的一天”班为开关颜色由添加或删除他

function addTimeBlocksHandler() {
    let arrTimeBlocks = document.getElementsByClassName("time-block");

    for (let i = 0; i < arrTimeBlocks.length; i++) {
        if (document.getElementsByClassName("time-block")[i].classList.contains("red-my-day")) {
                arrTimeBlocks[i].addEventListener("click", () => {
                document.getElementsByClassName("time-block")[i].classList.remove("red-my-day");
            });
        } else if (!document.getElementsByClassName("time-block")[i].classList.contains("red-my-day")) {
            arrTimeBlocks[i].addEventListener("click", () => {
                document.getElementsByClassName("time-block")[i].classList.add("red-my-day");
            });
        }
    }


}

addTimeBlocksHandler();

函数addTimeBlocksHandler（）{
让arrTimeBlocks=document.getElementsByClassName（“时间块”）；
for（设i=0；i{
document.getElementsByClassName（“时间块”）[i].classList.remove（“红色我的日子”）；
});
}如果（！document.getElementsByClassName（“时间块”）[i].classList.contains（“红色我的日子”））{
arrTimeBlocks[i].addEventListener（“单击”，（）=>{
document.getElementsByClassName（“时间块”）[i].classList.add（“红色我的日子”）；
});
}
}
}
addTimeBlocksHandler（）；

---

为什么这一次有效，换成红色就行了

代码不工作的原因是当执行javascript时，它会为

div

元素获取类

class=“time block”

。由于此元素没有类

red my day

，因此它将跳过在第一个

if

块中添加

单击
事件侦听器，并移动到
else
块，为该事件分配侦听器。这就是为什么它只对红色有效一次

为了简化代码，只需使用
toggle（）
，这样它就可以在每次单击元素时切换类


函数addTimeBlocksHandler（）{
让arrTimeBlocks=document.getElementsByClassName（“时间块”）；
for（设i=0；i{
elem.target.classList.toggle（'red-my-day'）；
});
}
}
addTimeBlocksHandler（）
。红色我的一天{
颜色：红色；
}
00:00-00:59
00:10 - 01:59
00:20-02:59