个人中心
gpt4 book ai didi

javascript - 如何让我的暗模式开关在每次点击时都能正常工作？

转载 作者：行者123 更新时间：2023-12-01 15:19:02 24 4
gpt4 key购买 nike

我正在构建一个带有暗模式开关的应用程序。它适用于第一次点击，但之后，它适用于每第二次点击。

(这个片段显示了一个复选框。在元素中，它看起来像一个真正的开关)

知道如何通过单击使其工作吗？

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 添加另一个事件监听器。 - 带上您的 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>



最后，您可能要考虑使用 .classList 使用元素的类时，因为它允许您使用诸如 .add() 之类的方法/ .remove() / .contains() - 如果元素一次设置多个类，您当前的方法将失败，而这些方法可以避免这种情况 

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/

24 4 0
文章推荐： javascript - 类型错误 : Invalid attempt to spread non-iterable instance
文章推荐： java - java中基于条件的xpath
文章推荐： c# - 为什么java中的递归比.net慢？
文章推荐： Qt:如何从内存中清理 QImage
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com