JS 切换只添加 "class" 而没有 class 名称，添加和删除工作正常

Question

我正在学习并尝试将深色模式按钮添加到我的网站。我有工作开关按钮和 CSS。但是当我想添加到 body class "dark" 时，切换功能无法正常工作。功能添加和删除是有效的，但我不想通过“if”来解决它。

const switchButton = document.querySelector(".switch")

switchButton.addEventListener("click", () => {
    document.querySelector("body").classList.toggle("dark")
})

当我们用 add 替换 toggle 时 - 它工作正常。

这是实时页面：https://gearlistmaker.com/

这里是代码：https://github.com/jankamon/GearListMaker

Answer 1

由于事件冒泡，点击事件触发了两次

你可以检查复选框状态，这样更有意义也更安全

https://jsfiddle.net/mplungjan/7hfv5ynb/

switchButton.addEventListener("click", (e) => {
  document.querySelector("body").classList.toggle("dark", 
    switchButton.querySelector("input[type=checkbox]").checked)
})

Answer 2

您的代码运行良好。我检查检查是检查，然后我做出决定。如果检查被选中关闭灯并添加 class 到 body，如果没有被选中删除 class 暗...

const switchButton = document.querySelector(".switch")
const body = document.querySelector("body");

switchButton.addEventListener("click", () => {
    switchButton.checked ? body.classList.add("dark") : body.classList.remove("dark");
})

body.dark {background:black;}
body {background:white;}

<input type="checkbox" class="switch dark">Toggle dark</ button>

Answer 3

开关内部有一个输入。我认为这会导致点击事件冒泡到开关元素并导致切换触发两次。尝试添加以下内容，以便只触发一个点击事件：

document.querySelector(".switch > input").addEventListener("click", (e) => {
  e.stopPropagation();
})

或者，将事件附加到输入：

const switchButtonInput = document.querySelector(".switch > input")

switchButtonInput.addEventListener("click", () => {
    document.querySelector("body").classList.toggle("dark")
});

body.dark { background-color: grey; }
.switch { padding: 10px; border: 1px solid black; }
.switch > input { display: none; }

<label class="switch">
      <input type="checkbox">
      toggle
</label>

JS 切换只添加 "class" 而没有 class 名称，添加和删除工作正常

JS toggle adding just "class" without class name, add and remove working properly

javascript

toggle