0

我需要添加 cookie，以便当一个 div 打开（显示）并且用户单击刷新时，它会记住最后一个状态。

我知道这应该很容易，但我对 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

感谢尼克。

  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 的 key/value 对，expires / days // days 是可选的，默认为 session end ctx.bakeCookie = function(name , value, days) { if ( days ) { var date = new Date(); date.setTime(date.getTime() + (天 * 24 * 60 * 60 * 1000)); var expires = "; expires=" + date.toGMTString(); } else { var expires = ""; } 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]; 而 (c.charAt(0) === ' ' ) { c = c.substring(1, c.length); } if ( c.indexOf(nameEQ) === 0 ) { return c.substring(nameEQ.length, c.length); } } 返回空值；}; }; //cookie处理程序结束。) { c = c.substring(1, c.length); } if ( c.indexOf(nameEQ) === 0 ) { return c.substring(nameEQ.length, c.length); } } 返回空值；}; }; //cookie处理程序结束。) { c = c.substring(1, c.length); } if ( c.indexOf(nameEQ) === 0 ) { return c.substring(nameEQ.length, c.length); } } 返回空值；}; }; //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( );//水平 $('.contentPadd.l_view').show(); //列表 $('.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'). 节目（）; //列表 $('.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 回答
0

我写了一个 cookie 处理程序，你可以在这里找到：http: //forrst.com/posts/JavaScript_cookie_handler-JE9

要使用它，请创建Ovenmitts对象的新实例。然后，将两个参数传递给该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')and 。.css('display', 'none').show().hide()

bakeCookie您可以通过调用该方法并传入相同的名称（例如'opened'）来覆盖cookie 。这样，您可以向它传递一个值来记住哪个抽屉是打开的。

于 2012-04-04T14:19:46.920 回答