我正在學習并嘗試將暗模式按鈕添加到我的網站。我有作業開關按鈕和 CSS。但是當我想添加到 body 類“dark”時，切換功能無法正常作業。功能添加和洗掉正在作業，但我不想通過“如果”來解決它。
const switchButton = document.querySelector(".switch")
switchButton.addEventListener("click", () => {
document.querySelector("body").classList.toggle("dark")
})
當我們用 add 替換切換時 - 它作業正常。
這是實時頁面：https ://gearlistmaker.com/
這是代碼：https ://github.com/jankamon/GearListMaker
uj5u.com熱心網友回復：
您可以檢查復選框狀態
https://jsfiddle.net/mplungjan/7hfv5ynb/
switchButton.addEventListener("click", (e) => {
document.querySelector("body").classList.toggle("dark",
switchButton.querySelector("input[type=checkbox]").checked)
})
uj5u.com熱心網友回復：
開關內部有一個輸入。我認為這會導致點擊事件冒泡到開關元素并導致切換觸發兩次。嘗試添加以下內容，以便僅觸發一次單擊事件：
document.querySelector(".switch > input").addEventListener("click", (e) => {
e.stopPropagation();
})
uj5u.com熱心網友回復：
您的代碼運行良好。我檢查檢查是檢查，然后我做出決定。如果選中檢查，關閉燈并添加類到正文，如果未選中，則洗掉類暗...
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/460649.html
標籤：javascript 切换
上一篇：遍歷陣列的更好方法