Question

我的代码应在单击后将颜色切换为红色，然后再切换回原来的颜色，但是它只能运行一次！

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

通过添加或删除他来更改颜色的“ red-my-day”类。

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();

为什么这一次起作用，切换到红色就可以了？

Answer 1

您的代码不起作用的原因是当执行javascript时，它获取了class="time-block"元素的类div。由于此元素没有类red-my-day，因此它将跳过在第一个click块内添加if事件监听器，并移至else块并为其分配监听器那件事。这就是为什么它只对红色起作用一次的原因。

为简化代码，您只需使用toggle()，以便在每次单击元素时切换类。

function addTimeBlocksHandler() {
    let arrTimeBlocks = document.getElementsByClassName("time-block");
    for (let i = 0; i < arrTimeBlocks.length; i++) {
      arrTimeBlocks[i].addEventListener("click", (elem) => {
        elem.target.classList.toggle('red-my-day');
      });
    }
}

addTimeBlocksHandler();

.red-my-day{
  color: red;
}

<div class="time-block">00:00 - 00:59</div>
<div class="time-block">00:10 - 01:59</div>
<div class="time-block">00:20 - 02:59</div>

第二次无效

1 个答案: