0

我创建了一个“待办事项列表”，当单击某个按钮时，它会在列表中的项目的文本上适当地放置一种样式

<li className = {`todo-item ${todo.completed ? "completed" : ""}`}>
     {text} 
</li>

在相应的 css 文件中，我有以下内容

 .completed {
    text-decoration: line-through;
    opacity: 0.5;
  }

现在，我想实现另一个按钮（例如：“学校”）。当按下学校按钮时，文本会变成不同的样式（如黄色）。在我的CSS中我有

  .school {
    color: yellow;
  }

我怎样才能使它在我点击学校按钮时变成黄色，当我同时点击完成和学校按钮时，它变成淡黄色并带有一条线？我尝试过的是把 todo.school ？"school" : "" 里面的第一段代码，但是没有成功。

谢谢你的帮助，我真的很感激！

4

1 回答 1

1

您可以使用classList元素的属性来执行此操作。它有一个toggle()方法，允许您在元素上添加和删除一个类名，独立于当前在其上设置的任何其他类名。

completed.addEventListener('click', () => listItem.classList.toggle('completed'));
school.addEventListener('click', () => listItem.classList.toggle('school'));
body {
  background: darkgrey;
}

.completed {
  text-decoration: line-through;
  opacity: 0.5;
}

.school {
  color: yellow;
}
<ul>
  <li id="listItem">
    Go and have some dinner
  </li>
</ul>

<button id="completed">completed</button>
<button id="school">school</button>

于 2020-10-05T19:33:51.343 回答