时间戳

首页 > 解决方案 > Javascript：如何单击按钮，显示某些内容，然后再次单击并返回默认值？

javascript - Javascript：如何单击按钮，显示某些内容，然后再次单击并返回默认值？

问题描述

我有一个小问题：我有一些使用 CSS 样式的 HTML 内容。我在 JS 中创建了一个函数，当我单击一个按钮时，内容会被修改。我希望再次单击按钮并显示默认内容（HTML + CSS），某种“回归基本”。在不使用 CSS 创建类并使用切换或不刷新页面的情况下，这样做的方法是什么？很简单：点击 --> 出现在 JS 中所做的更改，再次点击 --> 消失在 JS 中所做的更改。谢谢！

var switchStatus = false;
$("#switch-button").on("click", function() {
  if(switchStatus === false) {
    $("body").css("background-color", "white");
    $("h1").css("color", "#24242e");
    $(".followers").css("color", "#67627b");
    $(".switch-text").css("color", "#67627b");
    $("#switch-button").css({
      "background-color": "#252b43",
      "color": "lightgrey"
      }).text("Dark Mode");
    $(".my-card").css("background-color", "#f0f3fa");
    $(".card-user").css("color", "#252b43");
    $("h5").css("color", "#252b43");
    $("h2").css("color", "#252b43");
    $(".secondLineCard").css("background-color", "#f0f3fa");
    $(".small-card-actions").css("color", "grey");
    $(".small-card-number").css("color", "#24242e");
    switchStatus = true;
  } else if(switchStatus === true) {
    //What piece of code should I put here to get back to normal content without refreshing the page?
  }
});

标签： javascripthtmljquerycss

解决方案

这就是你想要做的。

let switchStatus = true;

$("#switch-button").on("click", function () {
  if (switchStatus === false) {
    $("body").css("background-color", "white");
    switchStatus = true;
  } else if (switchStatus === true) {
    $("body").css("background-color", "blue");
    switchStatus = false;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
<button id="switch-button">switch</button>
</body>

更好的方法是使用 css 类toggleClass()

$("#switch-button").on("click", function () {
  $("body").toggleClass("color");
});
.color {background-color: coral;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <button id="switch-button">switch</button>
</body>

推荐阅读