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

2024年1月10日 216次阅读

我有一个功能,用一个按钮(#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视图.

我尝试过以前的线程中的许多选项,但所有选项都失败了.

最佳答案 只需设置并获取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;
});
点赞