慶應義塾大学のサイト模写をしていて、背景を白から黒に変更した際に、その状態をクッキーに保存し、背景が黒になった後は、ページを再読込しても、背景が黒の状態で読み込まれる、ということを実現したいです。
現時点でこのようなコードを書いています。
HTML
<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>
CSS
.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; }
jQuery (自分で作成したjquery.jsというファイルに記述しているコード)
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.
というエラーメッセージが表示されます。
該当のソースコード
エラーの該当コードはこちらです。
jQuery
var cookie = Cookies.get("havingb");
以前、
https://teratail.com/questions/9z0r0mp3inwyn6
で教えていただきましたが、Javascriptでのコードで自分が組んだコードと大きくかけ離れていたため、解決することができませんでした。すみません。
できれば、私が今回の質問に書いたコードをベースにご教授いただきますと助かります。
我儘言って本当に申し訳ありません。
どうぞ、よろしくお願いいたしますm(_ _)m
0 コメント