使用 cookie 切换 body 类

Question

我一直在为此苦苦寻找可行的解决方案。 目标是为视力不佳的人创建一个文本大小切换器。 我创建了三个 span 元素，分别是 small、medium 和 large 类。

我有一段代码几乎可以完成工作，但它需要那个 cookie 部分。

$(function() {
    $(".font-toggle span").click(function() {
        var size = $(this).attr('class');
        $("body").attr("id", size);
        return false;
    });    
});

如何使用 cookie 来保存我的选择并在页面刷新后添加它？ 已经阅读了许多关于设置 cookie 的 stackoverflow 帖子，但它们都只有一个切换功能。我这里有三个。

JSFIDDLE HERE

非常感谢！

Answer 1

$(document).ready(function(){
    $(".font-toggle span").click(function() {
        var size = $(this).attr('class');
        $("body").attr("id", size);
        if($.cookie('mycookie') == 'valueOfCookie'){
           $.cookie('mycookie', '');
        }
        else{
          $.cookie('mycookie', 'valueOfCookie');
        }
        
        return false;
    }); 
    if($.cookie('mycookie') == 'valueOfCookie'){
       $("body").attr("id", 'big-font');
    }
    else{
      $("body").removeAttr("id");
    }
});

#big-font{
  font-size: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/carhartl/jquery-cookie/releases/download/v1.4.1/jquery.cookie-1.4.1.min.js"></script>


<div class="font-toggle">
  <span class="big-font">
   Button
  </span>
</div>
<div>
  Text To Show
</div>

Answer 2

也许这对你有用。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/carhartl/jquery-cookie/releases/download/v1.4.1/jquery.cookie-1.4.1.min.js"></script>
<script>
  "use strict";


  $(document).ready(function() {
    let eyesight = $.cookie('eyesight');

    if (eyesight != undefined) {
      $("body").addClass(eyesight);
    } else 
      setEyesight('medium'); // Default size

    $(".font-toggle span").click(function() {
      setEyesight($(this).attr('class'));
    });
  });


  function setEyesight(size) {
    let eyesight = $.cookie('eyesight');

    if (eyesight != undefined) {
      $("body").removeClass(eyesight);
      $.removeCookie('eyesight');
    }

    $("body").addClass(size);
    $.cookie('eyesight', size);
  }
</script>

Answer 3

这个呢？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/carhartl/jquery-cookie/releases/download/v1.4.1/jquery.cookie-1.4.1.min.js"></script>
<script>
  "use strict";

  $(document).ready(function() {
    let eyesight = new Eyesight();
    eyesight.initialize();

    $(".font-toggle span").click(function() {
      eyesight.set($(this).attr('class'));
    });
  });

  function Eyesight() {
    let self = this;
    let name = "eyesight";
    let current = null;
    let _default = "medium";
    let data = $.cookie(name);

    // initialzie
    this.initialize = function() {
      if (data!= undefined) {
        $("body").addClass(data);
        current = data;
      } else 
        self.set(_default); // Default size

      // init cookie listener
      self.listener();
    };

    // set eyesight function
    this.set = function(size) {
      if (data != undefined) {
        $("body").removeClass(data);
        $.removeCookie(name);
      }

      $("body").addClass(size);
      $.cookie(name, size);
      current = size;
    };

    // eyesight cookie listener function
    this.listener = function() {
      setTimeout(function() {
        let cookie = $.cookie(name);

        if (cookie != undefined && cookie != current)
          self.set(cookie);

        self.listener();
      }, 100);
    };
  }
</script>