Toggle Class/Id

Question

因此，对于我的网站，我想要一个像系统这样的完整系统，您可以在其中显示您完成视频或漫画。我意识到我应该有一个启动红色的div，但您可以单击div以变绿色，但您也可以再次单击以切换为Red Just Incase。我进行了一些研究，并得到了一些答案，例如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>