weixin_33726318 2017-04-03 11:55 采纳率: 0%
浏览 19

保存切换条件

I have written a code for the flip switch but the state always changes while refreshing the page:

enter image description here

  • 写回答

1条回答 默认 最新

  • weixin_33747129 2017-04-03 12:09
    关注

    I'll assume you are trying to replace the Ajax post request you have with something else.

    My suggestion would be to use a cookie which will save some information locally for js to use.

    Firstly, add jQuery & jQuery Cookie to the top of your webpage like this (within the <head> tag):

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js.js" charset="utf-8"></script>

    Then, in your javascript file, do the following:

    (function($) {
  // Grabs cookie and puts into a js variable.
  var toggled = $.cookie('toggled');

//  On click of checkbox, check if set/unset. Then set cookie to true/false.

  $('#switch').change(function()) {
      if($(this).is(':checked')) { // If set to true, set toggled to true.
        $.cookie('toggled', true, { expires: 1, path: '/' });
      } else { // Else, set to false.
        $.cookie('toggled', null, { expires: 1, path: '/' });
      }
  }

})(jQuery);

    You'll need to then check the toggled cookie on refresh and add behaviour to check the box if toggled is true:

    if(toggled == 'true') { //If cookie set to true...
 $('#switch').attr('checked','checked').flipswitch("refresh") // Flip the switch (Important for jquery mobile).
}

    Please see jsFiddle for a working example.

    I hope this helps.

    评论

报告相同问题？

  • ruoyi页面切换查询条件保留
    2023-07-03 11:46
    全能打工人的博客 ruoyi页面切换时查询条件保留
  • vue中tab切换前端实现_vue实现Tab切换功能
    2020-12-30 01:35
    深夜丨幽游的博客 在项目开发中，我们经常会碰到Tab切换的功能，而在Vue中想实现这样的功能也应该有很多种，常用的三种应该是 Tab路由切换、Tab动态组件切换、通过v-show设置Tab显示隐藏。每种方法实现起来其实都不难，看看官网介绍或...
  • vue中tab切换前端实现_vue 实现tab切换保持数据状态
    2021-01-12 07:56
    Weiran Huang的博客 网页做tab切换，由于组件每一次切换都会重新版实例化组件，我们想要网页不论如何切换都仍然保持tab里面的内容不会刷新版，减少网页重新版渲染以及减少请求实现方法：使用包裹组件列表网页跳转详情 ，列表网页保持上...
  • 2025年前端面试题汇总
    2023-02-08 22:55
    sun_qqq的博客 localStorage：永久保存，以键值对保存，存储空间5M sessionStorage：关闭页签/浏览器时清空 cookie：随着请求发送，通过设置过期时间删除 session：保存在服务端 localStorage/sessionStorage是window的属性，...
  • JeecgBoot Vue2前端国际化语言切换
    2023-02-22 17:16
    bug0到1的博客 前端通过form添加数据时，对应的切换语言数据都要添加，并保存至数据库。不知为啥会弹出危险确认框，如害怕不安全，也可自行查询相关查找相关资料。(2).前端切换语言后，查询数据时，接口携带对应的语言类型传至后台...
  • 前端面试八股文（超详细）
    2022-03-06 17:42
    小泽今天早睡的博客 5、使用闭包的注意点 （1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量...
  • JS仿当当网首页Tab切换特效
    2021-07-24 19:43
    【JS仿当当网首页Tab切换特效】是一种常见的前端交互设计，用于提高用户在网页上的浏览体验，尤其是在电子商务网站中，如当当网。这个特效允许用户通过点击不同的标签来切换显示不同类型的商品信息，如图书、电子...
  • Light-Dark-Mode:可以在明暗模式之间切换的前端应用
    2021-04-12 08:46
    这个名为"Light-Dark-Mode"的项目专注于创建一个前端应用，允许用户根据个人偏好或者环境光线条件在明亮和深色主题之间自由切换。 **一、明暗模式的概念** 明暗模式是界面设计的一种趋势，它为用户提供两种视觉...
  • vue项目切换页面缓存搜索条件
    2022-03-29 15:40
    niruge的博客 最近碰到一个项目难点，用户在列表搜索待审批的数据，点击审批（单独页面），审批完成后回到列表页，把待审批搜索条件给重置了，又需要重新搜 解决：技术点vue-router，vuex 1.将父类公用的router-view包裹上keep-...
  • 前端学习（四）
    2022-01-14 23:11
    5chenyu的博客 类名操作 Node.classList.add("class") 添加class Node.classList.remove("class") 移除class Node.classList.toggle("class") 切换class，有则移除，无则添加 Node.classList.contains("class") 检测是否存在class...
  • 没有解决我的问题, 去提问