Question

一个非常简单的待办事项列表，您可以在鼠标悬停在其上时突出显示每个项目，并在点击它们时检查完成... 通过类添加切换完成，但是在单击时不应用类（或应用但文本不会更改？）

你可以帮帮我吗？我确信这似乎是一个非常愚蠢的错误：

或者在这里：

var hover = document.querySelectorAll('li');

for (var i = 0; i < hover.length; i++) {

  hover[i].addEventListener ("mouseover", function() {
  this.classList.add("greener");
  });

  hover[i].addEventListener ("mouseout", function() {
  this.classList.remove("greener");
  });

  hover[i].addEventListener ("click", function() {
  this.classList.toggle("done");
  });   
}

.greener {
  color: green;
  font-style: italic;
  font-weight: bold;
};

.done {
  color: grey;
  text-decoration: line-through;
}

<ul>
  <li>Feed loratadina to you</li>
  <li>Create a black crate</li>
  <li>Sleep more than 7 hours</li>
</ul>

Answer 1

您的课程已被应用，但您的CSS无效;删除分号：

.greener {
  color: green;
  font-style: italic;
  font-weight: bold;
}; /* ← this one */

Updated JSFiddle

classList“add”工作但“toggle”不是

1 个答案: