文章/答案/技术大牛

发布

社区首页 >问答首页 >如何让我的黑暗模式开关工作在每次点击？

问如何让我的黑暗模式开关工作在每次点击？
EN

Stack Overflow用户

提问于 2020-01-30 14:04:12

回答 8查看 2.2K关注 0票数 5

我正在构建一个带有暗模式开关的应用程序。它在第一次单击时工作，但在第一次单击之后，它在第二次单击时工作。

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

知道我怎么能让它只需一次点击就能工作吗？

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>

css

javascript

html

回答 8

Stack Overflow用户

回答已采纳

发布于 2020-01-30 14:10:02

每次单击复选框时，都要将另一个eventListener添加到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');
}

票数 7

Stack Overflow用户

发布于 2020-01-30 14:08:59

在复选框的每个单击事件上，您都要在darkModeSwitch元素上设置一个新的事件侦听器，可以删除该事件侦听器。

const body = document.getElementById('body');
let currentBodyClass = body.className;
const darkModeSwitch = document.getElementById('darkModeSwitch');

//Dark Mode
function darkMode() {
    
        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>

票数 5

Stack Overflow用户

发布于 2020-01-30 14:13:45

这更容易使用输入类型进行检查。

var isChecked= document.getElementById('input[type="checkbox"]').checked;
if(isChecked){ //checked
  //execute code here
}else{ //unchecked
  //execute code here
}

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59987789

复制

相似问题

问如何让我的黑暗模式开关工作在每次点击？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让我的黑暗模式开关工作在每次点击？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让我的黑暗模式开关工作在每次点击？
EN