【質問】jqueryのプラグイン「mix it up」のクッキー保存について
質問です。
現在作成中のサイトで、jqueryのプラグイン「mix it up」を使用し、記事の絞り込み機能を搭載しております。
いくつかのタグボタンを用意し、そのボタンを押せば、そのタグがついた記事が絞り込まれるという仕組みです。
ページを更新すれば絞り込んだ内容がリセットされてしまうのですが、これを解決するため、クッキーを保存するプラグイン「jquery.cookie.js」を活用しようと考えておりますが、コードの書き方がわからず困っております。
sample.html
<div class="style1">
<div>
<div class="filter style2" data-filter=".a">青</div>
<div class="filter style2" data-filter=".b">赤</div>
<div class="filter style2" data-filter=".c">黄</div>
</div>
</div>
<dl>
<dd class="sort" data-sort="default">新着順</dd>
<dd class="sort" data-sort="myorder:desc">価格の高い順</dd>
<dd class="sort" data-sort="myorder:asc">価格の低い順</dd>
<dd class="sort" data-sort="random">ランダム</dd>
</dl>
<div class="style3">
<div class="mix a">青</div>
<div class="mix b">赤</div>
<div class="mix c">黄</div>
</div>
sample.js
$('.style3').mixItUp({
controls: {
toggleFilterButtons: true,
toggleLogic: 'and',
},
animation: {
duration: 0,
},
});
$('.style2').on('click', function(){
$(this).toggleClass('style2b');
});
.style2のタグをクリックすると.style3の記事が絞り込み検索される仕組みです。
.style2をクリックすると同時に.style2bが付与され色が反転し、どのタグが選択されているか目視できるようにしています。
.mixにはdisplay:none;がかかっています。
このクッキーを保存して、ページが更新された場合に絞り込み検索および付与された.style2bが残っている状態にしたいと考えております。
独学で作成していて壁にぶつかっております。どうかご教授お願い申し上げます。
Author And Source
この問題について(【質問】jqueryのプラグイン「mix it up」のクッキー保存について), 我々は、より多くの情報をここで見つけました https://qiita.com/ryu221106/items/4d90aa2bd5386b962afe著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .