Question

我目前正在使用CSS，HTML和JQuery中的滑动按钮。我对JQuery有基本的了解，但对CSS和HTML很有知识。不过，我遇到了一个小问题，只要您按一下按钮，它就可以正常工作，但是在页面重新加载后，它会恢复为切换前的状态。我如何解决此问题，向任何解决方案（最好是客户端）开放？（下面是我的按钮及其旁边的代码的片段）

$(document).ready(function() {
  $('.toggle-menu-lang-cont').click(function() {
    $('.handle').toggleClass('slide');
    $('.toggle-menu-lang-cont').toggleClass('color-swap');
  });
});

body {
  background-color: black;
}

.toggle-menu-lang-cont {
  position: absolute;
  top: 2.5vw;
  right: 5vw;
  max-width: 3.5vw;
  width: 3.5vw;
  max-height: 1.5vw;
  height: 1.5vw;
  border-radius: 1vw;
  z-index: 5;
  background-color: #fff;
  transition: all 1s;
  transform: scale(1);
}

.handle {
  position: absolute;
  top: 0.15vw;
  right: .25vw;
  background-color: #0282E4;
  width: 1.25vw;
  height: 1.25vw;
  border-radius: 100%;
  filter: drop-shadow(0vw .15vw .15vw rgb(0, 0, 0, 0.6));
  transition: all 1s;
  transform: scale(1);
}

.slide {
  position: absolute;
  right: 2vw;
  background-color: white;
  transition: all 1s;
}

.color-swap {
  background-color: #0282E4;
  transition: all 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Code Project</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="stylesheet.css" <script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous">
  </script>
</head>

<body>
  <section class="toggle-menu-lang-cont">
    <div class="toggle-btn"></div>
    <div class="handle"></div>
  </section>
</body>

</html>

Answer 1

基本思想是在接合开关时利用LocalStorage。然后，您将交换机的当前状态存储到存储器中。页面加载后，您将检查是否存在存储密钥和存储值。如果该值为true（开关处于活动状态），请进行适当的调整，以使正确的类就位。如果未激活该开关，则什么也不做。

$(document).ready(function() {
  function toggleHandle() {
    $('.handle').toggleClass('slide');
  }

  if (localStorage.getItem('switch-state') && localStorage.getItem('switch-state') === "true") {
    $('.toggle-menu-lang-cont').addClass('color-swap');
    toggleHandle(); 
  }

  $('.toggle-menu-lang-cont').click(function() {
    let el = $('.toggle-menu-lang-cont');
    toggleHandle();
    el.toggleClass('color-swap');
    localStorage.setItem('switch-state', el.hasClass('color-swap'));
  });
});

工作示例

jsFiddle

Answer 2

如果您想保存状态，则需要将其保存在某个地方。如果仅需要在客户端而不是服务器端访问此状态，则应使用localStorage或sessionStorage。两者非常相似，但是如果您希望状态长期存在，请使用localStorage。

您可以通过以下方式访问值：

localStorage.getItem("colorSwapState");

如果item不存在，则返回null。否则，该值将始终以字符串形式返回。

您可以通过以下方式设置值：

localStorage.setItem("colorSwapState", "swap");

要删除：

localStorage.removeItem('colorSwapState')

我会将您的JavaScript更新为：

$(document).ready(function() {
  if (localStorage.getItem("colorSwapState") == "swap")
  {
    $('.handle').addClass('slide');
    $('.toggle-menu-lang-cont').addClass('color-swap');
  }

  $('.toggle-menu-lang-cont').click(function() {
    if (localStorage.getItem("colorSwapState") == "swap") {
      localStorage.removeItem("colorSwapState");
    } 
    else {
      localStorage.setItem("colorSwapState", "swap");
    }

    $('.handle').toggleClass('slide');
    $('.toggle-menu-lang-cont').toggleClass('color-swap');
  });
});

在页面刷新后保持类切换

2 个答案:

工作示例