js.cookie.jsを使ったサイトの背景色変更に関するクッキーの保存と呼び出し、利用

Question

慶應義塾大学のサイト模写をしていて、背景を白から黒に変更した際に、その状態をクッキーに保存し、背景が黒になった後は、ページを再読込しても、背景が黒の状態で読み込まれる、ということを実現したいです。

現時点でこのようなコードを書いています。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/jquery.cookie-1.4.1.min.js"></script>

<dl class="textSize list-inline text-right">
                        <dt class="list-inline-item pb-1 align-bottom" ><small>文字<br>サイズ</small></dt>
                        <dd id="textLarge" class="list-inline-item border p-2 mr-0"><a href="#">拡大</a></dd>
                        <dd id="textNormal" class="textDefault list-inline-item border p-2"><a href="#">標準</a></dd>
                        <dt class="list-inline-item pb-1 align-items-center" ><small>背景変更</small></dt>
                        <dd  class="list-inline-item border p-2 mr-0"><a  id="black" href="#">黒</a></dd>
                      </dl>

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>

    
    <script type="text/javascript" src="js/jquery.js"></script>

.blackback,.blackback .dropdown:hover,.blackback .a-taisetu ,.tab-area .blackback *,.blackback.rec_infoarea *,.blackback .card-header, .header-menu .blackback *{
    background-color: black!important;
    color: #fff!important;
}
.blackback li a{
    color: #fff!important;
}
.blackback .cl-dropdown-m li a:before, .blackback .card-body ::before{
    display: none;
    
 }

var $fblackback = $('.base,.header-menu,.nvb-colour,.dropdown-menu,.thr-dropdown-m,.taisetu-back,.for-purpose,.for-category,.tab-area,.nav-pills,.tab-content, .panel_area,.card-body,.admap_outer,.rec_infoarea,.access,.bottom-slider,.for-category ul,.card,#header-text');
 var $lfmandcb = $('.upper-h .uh-right dl dd a,.nav-link,.nav-link.active,.tcard .btn-link,.fp-item a');
 var $bluetowhf = $('li a,.link_list a');
 var $bblackc= $fblackback.hasClass('blackback');

 
  var cookie = Cookies.get("havingb");
  
 
    $(function(){
      if(cookie){
      $('#black').on('click',() => {
       
         $fblackback.removeClass('blackback');
         $('#headerlogo').find('img').attr('src', '../img/logo_01.png');
         $("#black").text($("#black").text().replace("白", "黒"));
         $lfmandcb.css('color','#212529');
         $bluetowhf.css('color','#007bff');
         
         /
         
      }
         
      )}
       else{
        $('#black').on('click',() => {
         $fblackback.addClass('blackback');
         $("#black").text($("#black").text().replace("黒", "白"));
         $('#headerlogo').find('img').attr('src', '../img/blackverlogo.png');
         $lfmandcb.css('color','#fff');
         $bluetowhf.css('color','#fff');
         Cookies.set("havingb",$bblackc);
         
         
        }
        )};
       
        }); 
       

実現したいこと

背景を黒にした後にその状態がクッキーに保存され、ページを再読込しても、背景黒のページが表示される。

背景変更ボタンを押すたびに、黒、白と背景が変更される。

発生している問題・エラーメッセージ

上記のjQueryのコードでは、機能ぜず、
jquery.js:24 Uncaught ReferenceError: Cookies is not defined.
というエラーメッセージが表示されます。

該当のソースコード

エラーの該当コードはこちらです。

 var cookie = Cookies.get("havingb");

以前、
https://teratail.com/questions/9z0r0mp3inwyn6
で教えていただきましたが、Javascriptでのコードで自分が組んだコードと大きくかけ離れていたため、解決することができませんでした。すみません。

できれば、私が今回の質問に書いたコードをベースにご教授いただきますと助かります。
我儘言って本当に申し訳ありません。
どうぞ、よろしくお願いいたしますm(_ _)m

Comments

[yambejp]

jquery.jsnの24行目は具体的にどこの部分ですか？
ソースの提示が中途半端です。
codepenなどソースが載せられるサイトにアップしてもらうと指摘しやすいでしょう

[yuiran]

ご指摘とうございます。
24行目は、質問文にも記載しております、

該当のソースコード
エラーの該当コードはこちらです。

に書いてある以下のコードになります。

var cookie = Cookies.get("havingb");

よろしくお願いいたします。

Answer 1

結局jquery.cookie.js(HTMLのscriptタグより)を使うならCookies.getではなく$.cookieです