0

1 つの div が開いている (表示されている) ときにユーザーが更新をクリックしたときに、最後の状態が記憶されるように、Cookie を追加する必要があります。

私はそれが簡単であることを知っていますが、私はjsスクリプトの完全な初心者であり、これについて頭を悩ませてきました。どんな助けでも大歓迎です。このフォーラムでさまざまな例を見てきましたが、それらは完全で明確ではありません。単純なコードに対する単純な解決策を探しています。ありがとうございました！

<script type="text/JavaScript">
$(document).ready(function(){       
    $('a.row_view').click(function() {
        $('.contentPadd.r_view').css('display', 'block');
        $('.contentPadd.l_view').css('display', 'none')
        $('.contentPadd.t_view').css('display', 'none');
    });
    $('a.list_view').click(function() {
        $('.contentPadd.r_view').css('display', 'none') //horizontal
        $('.contentPadd.l_view').css('display', 'block') //list
        $('.contentPadd.t_view').css('display', 'none') //thumbnails
    });
    $('a.table_view').click(function() {
        $('.contentPadd.r_view').css('display', 'none')
        $('.contentPadd.l_view').css('display', 'none')
        $('.contentPadd.t_view').css('display', 'block')
    });
});                                    
</script>

<a class="row_view">1</a>&nbsp;&nbsp;<a class="list_view">2</a>&nbsp;&nbsp;<a class="table_view">3</a>

<div class="contentPadd r_view">NUMBER 1</div>
<div class="contentPadd t_view">NUMBER 2</div>
<div class="contentPadd l_view">NUMBER 3</div>
4

2 に答える 2

0

ここで見つけることができる Cookie ハンドラーを作成しました: http://forrst.com/posts/JavaScript_cookie_handler-JE9

これを使用するには、オブジェクトの新しいインスタンスを作成しOvenmittsます。次に、名前と値の 2 つのパラメーターをbakeCookieメソッドに渡します。click関数内で、次の操作を行います。

$('a.row_view').click(function() {
  var cookieObj = new Ovenmitts();
  cookieObj.bakeCookie('opened', 'a.row_view');
  $('.contentPadd.r_view').css('display', 'block');
  $('.contentPadd.l_view').css('display', 'none')
  $('.contentPadd.t_view').css('display', 'none');
});

次に、ページの読み込み時にadmireCookieメソッドを呼び出します。

$(document).ready(function() {
  var cookieObj = new Ovenmitts();
  var cookie = cookieObj.admireCookie('opened');
  if (cookie === 'a.row_view') {
    $('.contentPadd.r_view').css('display', 'block');
    $('.contentPadd.l_view').css('display', 'none')
    $('.contentPadd.t_view').css('display', 'none');
  }
});

これを実装する際に問題がある場合はお知らせください。

また、の代わりにjQuery や関数を使用することも.css('display', 'block')できます。.css('display', 'none').show().hide()

bakeCookieメソッドを呼び出して同じ名前 (「opened」など) を渡すことで、Cookie を上書きできます。そうすれば、どの引き出しが開いているかを覚えておくために値を渡すことができます。

于 2012-04-04T14:19:46.920 に答える
0

ニックに感謝します。

  1. これを作成するか、.js ファイルに追加します。

    // レイアウトを一覧表示するための Cookie ハンドラー // 新しいオブジェクトをインスタンス化し、変数を作成して new 演算子を呼び出す // 例: var myCookie = new Ovenmitts(); // その後、myCookie.bakeCookie() などを介して Ovenmitts のメソッドにアクセスできます。 var Ovenmitts = function() { var ctx = this; // cookie を作成します // 3 つのパラメータを受け入れます: name、value、days // cookie は name / value、expires / days のキーと値のペアを受け取ります // days はオプションで、デフォルトはセッション終了になります ctx.bakeCookie = function(name 、値、日) { if ( 日 ) { var date = new Date(); date.setTime(date.getTime() + (日 * 24 * 60 * 60 * 1000)); var expires = "; expires=" + date.toGMTString(); } else { 変数の有効期限 = ""; return document.cookie = name + "=" + value + expires + "; path=/"; }; // Cookie を読み取ります // name パラメータを受け入れます (Cookie の最初の値) ctx.admireCookie = function(name) { var nameEQ = name + '='; var ca = document.cookie.split(';'); for ( var i = 0; i < ca.length; i += 1 ) { var c = ca[i]; while (c.charAt(0) === ' ' ) { c = c.substring(1, c.length); } if ( c.indexOf(nameEQ) === 0 ) { return c.substring(nameEQ.length, c.length); null を返します。}; }; //Cookie ハンドラの終了。) { c = c.substring(1, c.length); } if ( c.indexOf(nameEQ) === 0 ) { return c.substring(nameEQ.length, c.length); null を返します。}; }; //Cookie ハンドラの終了。) { c = c.substring(1, c.length); } if ( c.indexOf(nameEQ) === 0 ) { return c.substring(nameEQ.length, c.length); null を返します。}; }; //Cookie ハンドラの終了。

    $(document).ready(function(){ //商品リストのレイアウト div switch
    $('a.row_view').click(function() { var cookieObj = new Ovenmitts(); cookieObj.bakeCookie('opened', ' a.row_view'); $('.contentPadd.r_view').show(); $('.contentPadd.l_view').hide(); $('.contentPadd.t_view').hide(); }) ;

    $('a.list_view').click(function() { var cookieObj = new Ovenmitts(); cookieObj.bakeCookie('opened', 'a.list_view'); $('.contentPadd.r_view').hide( );//horizo​​ntal $('.contentPadd.l_view').show(); //list $('.contentPadd.t_view').hide(); //サムネイル });
    $('a.table_view').click(function() { var cookieObj = new Ovenmitts(); cookieObj.bakeCookie('opened', 'a.table_view'); $('.contentPadd.r_view').hide( ); $('.contentPadd.l_view').hide(); $('.contentPadd.t_view').show(); }); var cookieObj = new Ovenmitts(); var cookie = cookieObj.admireCookie('opened'); if (cookie === 'a.row_view') { $('.contentPadd.r_view').show(); $('.contentPadd.l_view').hide(); $('.contentPadd.t_view').hide(); } var cookieObj = new Ovenmitts(); var cookie = cookieObj.admireCookie('opened'); if (cookie === 'a.list_view') { $('.contentPadd.r_view').hide();//水平 $('.contentPadd.l_view'). 見せる（）; //list $('.contentPadd.t_view').hide(); //サムネイル } var cookieObj = new Ovenmitts(); var cookie = cookieObj.admireCookie('opened'); if (cookie === 'a.table_view') { $('.contentPadd.r_view').hide(); $('.contentPadd.l_view').hide(); $('.contentPadd.t_view').show(); } //END 商品リストのレイアウト div スイッチ

  2. これを私のtest.htmlページに追加しました。js ファイルも追加します。

    <script language="javascript" src="YOURJSFILE.js"></script>
   <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js.js"></script>

<a class="row_view">TEST 1</a>&nbsp;&nbsp;
<a class="list_view">TEST 2</a>&nbsp;&nbsp;
<a class="table_view">TEST 3</a>
  1. これを私のtest.htmlページに追加しました
<div class="contentPadd r_view">TEST 1</div>
<div class="contentPadd t_view">TEST 2</div>
<div class="contentPadd l_view">TEST 3</div>

それでおしまい。- PHP に追加 - 画像を追加 - 拡張 - その他

于 2012-04-04T23:17:22.343 に答える