类列表 onclick 的多重切换

Question

大家好，这是我在这个网站上的第一篇文章，我想知道是否可以有多个 classList，并且每次单击元素时都会切换，并在最后一个 classList 之后循环，

这是我的 css：

:root {
  --primCol: #fff;
}

.dark-theme{
  --primCol: #9A4747;
}

body {
  display: inline-flex;
  width: 100vw;
  height: 100vh;
  background-color: var(--primCol);
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  transition: all .5s;
}

#wrapper {
  transition: all .7s;
  border-radius: 5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--primCol);
  width: 300px;
  height: 300px;
  box-shadow: 0 0 10px #B8B8B8;
}

#wrapper:active {
  transform: scale(1.3);
}

我的 jQuery：

$(document).ready(() => {
  $('#wrapper').click( () => {
    document.body.classList.toggle("dark-theme");
  });
});

Answer 1

试试这个。然后，使用 ::root 中的变量为元素提供样式。

$('#theme-switcher').click(function() {
  document.body.classList.toggle("dark-theme");
});

:root {
  --primCol: #fff;
}

::root.dark-theme {
  --primCol: #9A4747;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="theme-switcher">Toggle Theme</button>