我正在构建带有暗模式开关的应用程序。它在第一次单击时起作用，但在此之后，它在第二次单击时起作用。
(此代码段显示一个复选框。在元素中，它看起来像一个真实的开关)
知道如何通过单击即可使它工作吗？
const body = document.getElementById('body');
let currentBodyClass = body.className;
const darkModeSwitch = document.getElementById('darkModeSwitch');
//Dark Mode
function darkMode() {
darkModeSwitch.addEventListener('click', () => {
if (currentBodyClass === "lightMode") {
body.className = currentBodyClass = "darkMode";
} else if (currentBodyClass === "darkMode") {
body.className = currentBodyClass = "lightMode";
}
});
}#darkModeSwitch {
position: absolute;
left: 15px;
top: 15px;
}
.darkMode { background-color: black; transition: ease .3s; }
.lightMode { background-color: #FFF; transition: ease .3s; }
#darkModeSwitch input[type="checkbox"] {
width: 40px;
height: 20px;
background: #fff89d;
}
#darkModeSwitch input:checked[type="checkbox"] {
background: #757575;
}
#darkModeSwitch input[type="checkbox"]:before {
width: 20px;
height: 20px;
background: #fff;
}
#darkModeSwitch input:checked[type="checkbox"]:before {
background: #000;
}<body id="body" class="lightMode">
<div id="darkModeSwitch">
<input type="checkbox" onclick="darkMode()" title="Toggle Light/Dark Mode" />
</div>
</body>最佳答案
每次单击复选框时，您都会向darkModeSwitch添加另一个eventListener-将addEventListener从函数中移出并删除onclick
然后，您需要在let currentBodyClass = body.className;函数内部移动darkModeSwitch，以便每次更新该值。将其置于函数之外，您将在运行时为其分配一个值，然后再从不对其进行更新
最后，这是有道理的
body.className = currentBodyClass = "darkMode";
相反，只要做
body.className = "darkMode";
const darkModeSwitch = document.getElementById('darkModeSwitch');
const body = document.getElementById('body');
//Dark Mode
darkModeSwitch.addEventListener('click', () => {
let currentBodyClass = body.className;
if (body.className === "lightMode") {
body.className = "darkMode";
} else if (currentBodyClass === "darkMode") {
body.className = "lightMode";
}
});#darkModeSwitch {
position: absolute;
left: 15px;
top: 15px;
}
.darkMode {
background-color: black;
transition: ease .3s;
}
.lightMode {
background-color: #FFF;
transition: ease .3s;
}
#darkModeSwitch input[type="checkbox"] {
width: 40px;
height: 20px;
background: #fff89d;
}
#darkModeSwitch input:checked[type="checkbox"] {
background: #757575;
}
#darkModeSwitch input[type="checkbox"]:before {
width: 20px;
height: 20px;
background: #fff;
}
#darkModeSwitch input:checked[type="checkbox"]:before {
background: #000;
}<body id="body" class="lightMode">
<div id="darkModeSwitch">
<input type="checkbox" title="Toggle Light/Dark Mode" />
</div>
</body>最后，您可能需要在处理Element的类时考虑使用
.classList ，因为它将允许您使用诸如 .add() / .remove() / .contains() 之类的方法-如果Element在一个元素上设置了多个类，则当前方法将失败。时间，而这些方法可以避免这种情况let currentBodyClass = body.classList;
if (currentBodyClass.contains("lightMode")) {
currentBodyClass.add('darkMode');
currentBodyClass.remove('lightMode');
} else if (currentBodyClass.contains("darkMode")) {
currentBodyClass.add('lightMode');
currentBodyClass.remove('darkMode');
}
关于javascript - 如何使我的黑暗模式开关在每次点击时起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59987789/