Javascript css两种样式同时取决于布尔"completed"和"school"

Question

我创建了一个"待办事项列表"；当点击某个按钮时，在列表中项目的文本上适当地设置样式

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

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

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

现在，我想实现另一个按钮(例如："学校"(。当按下学校按钮时，文本将变为不同的样式(如黄色(。在我的css中，我有

.school {
color: yellow;
}

我如何才能让它在点击学校按钮时变成黄色，当我点击完成和学校按钮时，它变成淡黄色并有一条线穿过？我试过的是把玩具放到学校"学校"："quot；内部的第一段代码，但没有成功。

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

Answer 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>