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

【问题标题】：My code is malfunctioning, but I can't see what I'm doing wrong我的代码出现故障，但我看不出我做错了什么
【发布时间】：2021-08-04 19:03:21
【问题描述】：

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

我做了三个函数：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 更新之外，什么都没有发生。我该如何解决这个问题？

【问题讨论】：

我很确定这不是 jquery 的工作方式$("h1"), $("h2"), $("h3"), $("h4"), $("h5").css("color", "black");，它只会将最后一个 h5 变为黑色。你想要的是这种格式$("h4, h5").css("color", "black");
非常感谢。您可以将其发布为答案，以便我将其标记为解决方案吗？
我还链接到多个选择器 jquery doc，如果您有兴趣可以阅读

标签： javascript html jquery vue.js

【解决方案1】：

你的 jquery 选择器错误

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

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

你想要的是这种格式

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

欲了解更多信息，请转至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>

【讨论】：

【解决方案2】：

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

<!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>

【讨论】：

【解决方案3】：

两个函数都显示

backgroundColor = themeColors.lightModeBg

只需将 lightModeBg 更改为 darkModeBg

【讨论】：