JS切换添加仅"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

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

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>

Answer 3

您的代码运行良好。我检查检查是检查，然后我做决定。

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>