クッキーを使ってボディークラスを切り替える

Question

私はこのための解決策を見つけるのを躊躇しています。 目の不自由な人のためのテキストサイズのスイッチャを作成することです。 クラス小、中、大の3つのスパン要素を作成しました。

そして、私はほとんど仕事を終わらせるコードを持っていますが、そのクッキーの部分が必要です。

Cookieを使用して選択内容を保存し、ページの更新後に追加するにはどうすればよいですか？ Cookieの設定に関する多くのスタックオーバーフローの記事を読んでいますが、それらのすべてに1つのトグルしかありません。ここに私は3つあります。

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>