回答によっては最高4000ポイントを謝礼致します。
このJavaScriptを使って
http://designm.ag/tutorials/jquery-display-switch/
自社のECサイトで以下のサイトの[一覧で並べる][詳細で並べる]の表示切替のような動作を実現したいと思っています。
https://www.ec-saja.jp/mars/shopping_list.cfm?uk=0
ただこのScriptは表示方法を記憶しない為、1ページ目から2ページ目に移動すると、表示が元に戻ってしまいます。
いろいろ考えた結果、Cookieに表示方法を保存して読み込むのが一番良いのではと思いました。
以下の記述が表示を切替えている箇所だと思われるのですが、以下のScriptにどう追記すればイベントが発生した際にCookieに書込み、次のページに推移した時もCookieから設定を読み込んで表示方法を維持させることが出来るでしょうか?
$("a.switch_thumb").toggle(
function(){
$(this).addClass("swap");
$("ul.display").fadeOut(150, function() {
$(this).fadeIn(150).addClass("display");
});
}, ~~~~文字数制限の関係で以降はカットさせていただきます…
具体的なScriptの記述をお願い致します。
再回答ですみません。
次のコードでいかがでしょうか?
<script type="text/javascript" src="./test/jquery-latest.js"></script> <script type="text/javascript" src="./test/jquery.cookie.js"></script> <!-- ★ここを追加(パスは適宜変更する) --> <!-- ★ここから --> <script type="text/javascript"> var defVt = $.cookie('defaultViewType'); if(defVt==null){ $.cookie('defaultViewType', '1'); defVt = '1'; } $(document).ready(function(){ $("a.switch_thumb").toggle(function(){ if(defVt=='1'){ $.cookie('defaultViewType', '2'); $(this).removeClass("swap"); $("ul.display").fadeOut("fast", function() { $(this).fadeIn("fast").removeClass("thumb_view"); }); }else{ $.cookie('defaultViewType', '1'); $(this).addClass("swap"); $("ul.display").fadeOut("fast", function() { $(this).fadeIn("fast").addClass("thumb_view"); }); } }, function () { if(defVt=='1'){ $.cookie('defaultViewType', '1'); $(this).addClass("swap"); $("ul.display").fadeOut("fast", function() { $(this).fadeIn("fast").addClass("thumb_view"); }); }else{ $.cookie('defaultViewType', '2'); $(this).removeClass("swap"); $("ul.display").fadeOut("fast", function() { $(this).fadeIn("fast").removeClass("thumb_view"); }); } }); }); </script> <!-- ★ここまでを書き変えてください --> <!-- ★ここのタグをコメントにして、 <a href="#" class="switch_thumb swap">Switch Thumb</a> <ul style="display: block;" class="display thumb_view"> --> <!-- ★ここから --> <script type="text/javascript"> if(defVt=='1'){ document.write('<a href="#" class="switch_thumb swap">Switch Thumb</a>'); document.write('<ul style="display: block;" class="display thumb_view">'); }else{ document.write('<a href="#" class="switch_thumb">Switch Thumb</a>'); document.write('<ul style="display: block;" class="display">'); } </script> <!-- ★ここまでのスクリプトで置き換えてください。 -->
※トグルボタンの初期値設定ができなかったので、あまりキレイでなくなってしまいました。
表示切り替えのリンクの部分を以下のようにして、
[ <a href="#" onclick="document.toform.page_type.value=0;document.toform.submit();document.cookie='page_type=0';" class="this-paging">一覧で並べる</a> | <a href="#" onclick="document.toform.page_type.value=1;document.toform.submit();document.cookie='page_type=1';" >詳細で並べる</a> ]
ページの下の方に以下のようなscriptを埋めておくのはどうでしょう?
<script type="text/javascript"> if(document.cookie && document.cookie.match(/page_type=0/)) { document.toform.page_type.value=0; } else { document.toform.page_type.value=1; } </script>
このサイトの場合はサーバ側でCookieの処理をした方が良さそうではありますが、Javascriptだけでやる場合はこんな感じでいけるかと。
ただし、テストはしてないので動かないかもしれません(^^;;;
lastToggleというプロパティでトグルの値を取得できるらしいのですが、初期設定としてセットできませんでした。
初期設定ができる方法がわかればもっとスマートになると思います。
HALSPECIALさんに割いていただいた時間と技術を思えば安いものです。
lastToggleについて調べて見ましたが、確かにこちらが動作すればもっとスマートになりそうですね。
ですが今回の内容で十分満足しています。
cgiやphp、Javaのプログラマなら周りにいるのですが、jqueryなどを扱えるJavaScriptのプログラマが周りにいないもので、本当に困っておりましたので、本当に助かりました。
いつもJavaScriptがらみになると、正直困ってしまって…
外注先を探すのも意外に一苦労ですし…
HALSPECIALさんの連絡先を教えて欲しいぐらいです(笑)
この度は本当にありがとうございました。