javascript - 切换类/ID

Question

所以对于我的网站，我想要一个类似系统的完成，您可以在其中展示您完成的视频或漫画。我意识到我应该有一个以红色开头的 div，但您可以单击 div 变为绿色，但您也可以再次单击以切换回红色以防万一。我做了一些研究并得到了一些答案，例如 toggleClass、addClass 和 removeClass 但 Javascript 出于某种原因无法正常工作。

基本示例:

.undone /*Default Class*/
{width: 100px; height: 100px; background-color: red;}

.done /*Replacement Class*/
{width: 100px; height: 100px; background-color: green;}

<div class="undone"></div>

Answer 1

处理 click 事件并在处理程序中切换您的 .done 类

jQuery

$('#myDiv').on('click', function() {
   $(this).toggleClass('done');
});

.undone
{width: 100px; height: 100px; background-color: red;}

.done
{width: 100px; height: 100px; background-color: green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" class="undone"></div>

纯 Javascript

const div = document.getElementById("myDiv");

div.addEventListener('click', function() {
   div.classList.toggle('done');
});

.undone
{width: 100px; height: 100px; background-color: red;}

.done
{width: 100px; height: 100px; background-color: green;}

<div id="myDiv" class="undone"></div>