使用 jQuery 在带有 cookie 的两个 div 之间切换答案

【问题标题】：Toggling between two divs with cookies using jQuery使用 jQuery 在带有 cookie 的两个 div 之间切换
【发布时间】：2011-09-14 23:23:33
【问题描述】：

我有一个使用按钮（#button）在两个 div（.grid 和 .list）之间切换的功能。

HTML：

<a href="#" id="button">Change view</a>
<div class="grid">GRID</div>
<div class="list">LIST</div>

jQuery:

$('.list').hide();
$('.grid').show();
$('#button').toggle(function() {
    $('.grid').hide();
    $('.list').show();
    return false;
}, function() {
    $('.list').hide();
    $('.grid').show();
    return false;
});

如何添加 cookie 支持，以便在页面加载后保存和显示切换状态？当用户第一次加载页面时，会显示 .grid 视图。

我尝试了之前线程中的许多选项，但都失败了。

【问题讨论】：

很多变种，但都删除了。在发布不起作用的代码 sn-ps 时没有用处。
为您的toggle(); 使用点赞。
我的toggle(); 错了吗？
我认为您可以使用切换按钮做一些更简单的事情！ :)

标签： jquery cookies toggle

【解决方案1】：

只需设置并获取 cookie 的值并相应地切换元素（小提琴：http://jsfiddle.net/bpcJd/1/）：

function setCookie(name, value, lifetime_days) {
    var exp = new Date();
    exp.setDate(new Date().getDate() + lifetime_days);
    document.cookie = name + '=' + value + ';expires=' + exp.toUTCString() + ';path=/';
}

function getCookie(name) {
    if(document.cookie) {
        var regex = new RegExp(escape(name) + '=([^;]*)', 'gm'),
        matches = regex.exec(document.cookie);
        if(matches) {
            return matches[1];
        }
    }
}

// show list if cookie exists
if(getCookie('showlist')) {
    $('.list').show();
    $('.grid').hide();
} else {
    $('.list').hide();
    $('.grid').show();
}   

// click handler to toggle elements and handle cookie
$('#button').click(function() {
    // check the current state
    if($('.list').is(':hidden')) {
        // set cookie
        setCookie('showlist', '1', 365);
    } else {
        // delete cookie
        setCookie('showlist', '', -1);
    }
    // toggle
    $('.list').toggle();
    $('.grid').toggle();
    return false;
});

【讨论】：

我正在尝试您的解决方案，但它似乎在同一页面上工作。我想将 cookie 应用到整个网站。我该怎么做？还是我做错了什么？
它应该在整个域中工作，因为path 设置为/
你不是在path=之前忘记了;吗？

【解决方案2】：

如果你使用 jQuery $.cookie，这样的东西会起作用：

var $layouts = $('.list, .grid'), // cache objects
    $button = $('#button');       // to avoid overhead

$button.click(function(e, className){
    e.preventDefault();
    if(typeof className != 'undefined')
        $('.'+className).hide();
    $layouts.toggle();

    // set cookie to hold the state
    $.cookie('shown_type', ($layouts.eq(0).is(':visible') ? 'list' : 'grid'));
});

// check to see if a cookie exists for the app state
var shown_type = $.cookie('shown_type');
if(shown_type == 'list' || shown_type == 'grid'){
    $button.trigger('click', [shown_type]); // yes, a cookie exist, show this layout
} else{
    $button.trigger('click', ['list']); // no, a cookie does not exist, show list by default
}

Demo。要测试它是否有效，请单击一次开关将其设置为网格，然后复制 URL 并打开一个新选项卡，网格应该是显示的布局。

【讨论】：

【解决方案3】：

如果你使用 jquery cookie plugin 你可以这样做：

var visible = false;
if ($.cookie('grid') === 'true'){
    visible = true;
}
$('.list').toggle(!visible);
$('.grid').toggle(visible);


$('#button').click(function(){

    $.cookie('grid', $('.grid').is(':visible') , {expires: 365});
    $('.grid').toggle();
    $('.list').toggle();
});

在这里摆弄：http://jsfiddle.net/aXCSq/

第一次显示List，然后将".grid"的可见性保存在cookie中

【讨论】：