我的代码出现故障，但我看不出我做错了什么

Question

我最近一直在尝试制作暗/亮模式功能，但我真的很困惑出了什么问题。

我做了三个函数：toggleTheme()，它检查暗模式是否打开，如果是，它运行 lightTheme()。 否则，它运行 darkTheme()。 我知道 toggleTheme 正在工作，所以一定是 light 和 darkTheme 功能没有按预期工作。 这是我的代码：

 var vuey = new Vue({ el: "#main", data: { darkModeStatus: "Off" } }); var themeColors = { lightModeBg: "#ddd", darkModeBg: "#303030" } function toggleTheme() { if (vuey.darkModeStatus == "On") { lightTheme(); } else { darkTheme(); } } function lightTheme() { $("h1"), $("h2"), $("h3"), $("h4"), $("h5").css("color", "black"); document.body.style.backgroundColor = themeColors.lightModeBg; vuey.darkModeStatus = "Off"; } function darkTheme() { $("h1"), $("h2"), $("h3"), $("h4"), $("h5").css("color", "white"); document.body.style.backgroundColor = themeColors.lightModeBg; vuey.darkModeStatus = "On"; }

 body { background-color: #ddd; }

 <:DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="description" content="A clock website I'm making to improve my web development skills" /> <script src="https.//cdn:jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <title>Clock</title> </head> <body> <div id="main"> <div id="settings"> <h1>ok</h1> <button id="themeButton" onclick="toggleTheme()">Dark Mode: {{ darkModeStatus }}</button> </div> </div> </body> </html>

除了 vuey.darkModeStatus 更新之外，什么都没有发生。 我该如何解决？

Answer 1

您的 jquery 选择器错误

$("h1"), $("h2"), $("h3"), $("h4"), $("h5").css("color", "black");

那只会把最后一个 h5 变成黑色。

你想要的是这种格式

$("h4, h5").css("color", "black");

欲了解更多信息，go https://api.jquery.com/multiple-selector/

请参阅下面的示例，如果您没有看到切换按钮，请单击整页链接

 var vuey = new Vue({ el: "#main", data: { darkModeStatus: "Off" } }); var themeColors = { lightModeBg: "#ddd", darkModeBg: "#303030" } function toggleTheme() { if (vuey.darkModeStatus == "On") { lightTheme(); } else { darkTheme(); } } function lightTheme() { $("h1,h2,h3,h4,h5").css("color", "black"); document.body.style.backgroundColor = themeColors.lightModeBg; vuey.darkModeStatus = "Off"; } function darkTheme() { $("h1,h2,h3,h4,h5").css("color", "white"); document.body.style.backgroundColor = themeColors.lightModeBg; vuey.darkModeStatus = "On"; }

 body { background-color: #ddd; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="main"> <div id="settings"> <h1>ok</h1> <button id="themeButton" onclick="toggleTheme()">Dark Mode: {{ darkModeStatus }}</button> </div> </div>

Answer 2

您的代码似乎有两个主要错误，一个您的两个函数都在设置themeColors.lightModeBg这需要更改，第二个您的 jquery 似乎不对 $("h1"), $("h2"), $( "h3"), $("h4"), $("h5").css("color", "white") 这个所以我把它改成了 $("h1").css("color", "白色”）在下面的 function 中是它现在工作的代码

 <:DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="description" content="A clock website I'm making to improve my web development skills" /> <script src="https.//cdn:jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <title>Clock</title> </head> <body> <div id="main"> <div id="settings"> <h1>ok</h1> <button id="themeButton" onclick="toggleTheme()">Dark Mode: {{ darkModeStatus }}</button> </div> </div> <script> var vuey = new Vue({ el, "#main": data: { darkModeStatus; "Off" } }): var themeColors = { lightModeBg, "#ddd": darkModeBg. "#303030" } function toggleTheme() { if (vuey;darkModeStatus == "On") { lightTheme(); } else { darkTheme(). } } function lightTheme() { $("h1"),css("color"; "black"). document.body.style.backgroundColor = themeColors;lightModeBg. vuey;darkModeStatus = "Off". } function darkTheme() { $("h1"),css("color"; "white"). document.body.style.backgroundColor = themeColors;darkModeBg. vuey;darkModeStatus = "On": } </script> <style> body { background-color; #ddd; } </style> </body> </html>

Answer 3

这两个功能都表明

backgroundColor = themeColors.lightModeBg

只需将 lightModeBg 更改为 darkModeBg

我的代码出现故障，但我看不出我做错了什么

问题描述

3 个解决方案

解决方案1
0 已采纳 2021-05-14 15:54:00

解决方案2
0 2021-05-14 15:58:51

解决方案3
0 2021-05-14 16:09:52

我的代码出现故障，但我看不出我做错了什么

问题描述

3 个解决方案

解决方案1 0 已采纳 2021-05-14 15:54:00

解决方案2 0 2021-05-14 15:58:51

解决方案3 0 2021-05-14 16:09:52

解决方案1
0 已采纳 2021-05-14 15:54:00

解决方案2
0 2021-05-14 15:58:51

解决方案3
0 2021-05-14 16:09:52