时间戳

首页 > 解决方案 > 字体颜色不会恢复为原始颜色

javascript - 字体颜色不会恢复为原始颜色

问题描述

该事件仅以一种方式执行，并且由于某种原因在再次单击变量时不会以另一种方式执行。

我有多个其他事件在同一个变量上执行，它们都工作得很好。但是，当涉及到这一点时，它没有。

有什么建议么？

//Font color change
for (let i = 0; i < li.length; i++) {
    li[i].addEventListener('click', (e) => {
        if (li[i].style.color == '#4D5067') {
            li[i].style.color = '#C8CBE7'
        } else {
            li[i].style.color = '#4D5067'
        }
     })
}

标签： javascriptevent-handlingaddeventlistener

解决方案

在 CSS 中设置颜色，然后用于classList在类之间切换。

const ul = document.querySelector('ul');
ul.addEventListener('click', handleClick, false);

function handleClick({ target }) {
  target.classList.toggle('light');
}
li { color: #4D5067; }
li.light { color: #C8CBE7; }
<ul>
  <li>Test1</li>
  <li>Test2</li>
  <li>Test3</li>
  <li>Test4</li>
</ul>

推荐阅读