记住页面的颜色布局答案

【问题标题】：Remembering colour layout of page记住页面的颜色布局
【发布时间】：2011-11-14 10:53:23
【问题描述】：

使用 cookie，我希望它记住页面的颜色布局。（因此，如果他们将画廊设置为一种颜色，而将正文背景设置为另一种颜色，它将在刷新时保存。但它似乎不起作用。

这是我的 JavaScript 代码：

$(document).ready(function() {

    if (verifier == 1) {
        $('body').css('background', $.cookie('test_cookie'));
    }

    if (verifier == 2) {
        $('#gallery').css('background', $.cookie('test_cookie'));
    }

    if (verifier == 3) {
        $('body').css('background', $.cookie('test_cookie'));
        $('#gallery').css('background', $.cookie('test_cookie'));
    }

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

        var color = $('#set_cookie').val();

        $.cookie('test_cookie', color);
    });

    $('#set_page').click(function() {
        $('body').css('background',  $.cookie('test_cookie'));
        var verifier = 1;
    });

    $('#set_gallery').click(function() {
        $('#gallery').css('background', $.cookie('test_cookie'));
        var verifier = 2;
    });

    $('#set_both').click(function() {
        $('body').css('background', $.cookie('test_cookie'));
        $('#gallery').css('background', $.cookie('test_cookie'));
        var verifier = 3;
    });
});

还有我的 HTML：

<body>
        <div id="wrap">
            <div id="header">
                <img src="media/header.png" alt="Community Header" />
            </div>

            <p>Please select a background color for either the page's background, the gallery's background, or both.</p>

            <select id="set_cookie">
                <option value="#1d375a" selected="selected">Default</option>
                <option value="black">Black</option>
                <option value="blue">Blue</option>
                <option value="brown">Brown</option>
                <option value="darkblue">Dark Blue</option>
                <option value="darkgreen">Dark Green</option>
                <option value="darkred">Dark Red</option>
                <option value="fuchsia">Fuchsia</option>
                <option value="green">Green</option>
                <option value="grey">Grey</option>
                <option value="#d3d3d3">Light Grey</option>
                <option value="#32cd32">Lime Green</option>
                <option value="#f8b040">Macaroni</option>
                <option value="#ff7300">Orange</option>
                <option value="pink">Pink</option>
                <option value="purple">Purple</option>
                <option value="red">Red</option>
                <option value="#0fcce0">Turquoise</option>
                <option value="white">White</option>
                <option value="yellow">Yellow</option>
            </select>

            <input type="button" id="set_page" value="Page's Background" /><input type="button" id="set_gallery" value="Gallery's Background" /><input type="button" id="set_both" value="Both" />


            </div>
        </div>
    </body>

</html>

这是一个 jsFiddle 示例：http://jsfiddle.net/hL6Ye/

【问题讨论】：

如果您尝试使用更具描述性的问题标题并减少 sn-ps 中不相关代码的数量...
@bobbymcr 好的，谢谢，我会整理一下。
你对“验证者”的使用让我感到困惑。

标签： javascript jquery css cookies

【解决方案1】：

你的问题是

    if (verifier == 2) {
            $('#gallery').css('background', $.cookie('test_cookie'));
        }

 $('#set_gallery').click(function() {
        $('#gallery').css('background', $.cookie('test_cookie'));
        var verifier = 2;
    });

在您的代码中，您将 test_cookie 设置为背景色，并将上述 verifier 变量设置为 2。

根据您的代码，您希望在页面加载时 verfier 为 2。这不是真的，javascript 变量在会话之间不是持久的。如果需要，我们就不需要 cookie，我们会 吗？。

您的方法应该是两个不同的 cookie。 page_background 和 gallery_background。当页面加载时，您应该检查这些 cookie 的值并相应地设置颜色。如果没有设置 cookie，用户就不会费心去保存它们。

【讨论】：

【解决方案2】：

完整解决方案在这里：http://zequinha-bsb.int-domains.com/index.html

我无法让它在 jsfiddle.net 中工作

这是一个粘贴（可能太多了）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type='text/javascript' src='jquery-1.5.1.min.js'></script>
<script type='text/javascript'>

/* http://www.quirksmode.org/js/cookies.html */
function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        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);
    }
    return null;
}

function eraseCookie(name) {
    var date = new Date();
    date.setTime(date.getTime()+(-1));
    var expires = "; expires="+date.toGMTString();
    document.cookie = name+"="+""+expires+"; path=/";
}
/************************** quirksmode.org *****/

function setBGColor() {
    alert('Background color set!');
    var theBGColor = $("#setCookie").val();
    $('body').css('background-color',theBGColor);
    createCookie('MYSITEPGBG',theBGColor,365);
}

function setGLColor() {
    alert('Gallery background color set!');
    var theGLColor = $("#setCookie").val();
    $('#gallery').css('background-color',theGLColor);
    createCookie('MYSITEGLBG',theGLColor,365);
}

$(document).ready(function() {
    var bgCookie = readCookie('MYSITEPGBG');
    var glCookie = readCookie('MYSITEGLBG');
    var bgVerifier = true;
    var glVerifier = true;

    if (bgCookie != undefined) {
        bgVerifier = false;
        $('body').css('background-color',bgCookie);
    }
    if (glCookie != undefined) {
        glVerifier = false;
        $('#gallery').css('background-color',glCookie);
    }
    if (bgVerifier || glVerifier) 
        $('#giveChoices').toggle()
    else $('#allowChange').toggle();
});

</head>

<body>
<div id='gallery' style='float:left; width:400px; height:200px; display:block; ' >
    blah blah clah blah blah blah albh
</div>
<div id='giveChoices' style='display:none; ' >
    <p style='clear:both; margin-top:20px; ' >
        Please select a background color for either the page's background, the gallery's background, or both.
    </p>
    <select id="setCookie">
        <option value="#1d375a" selected="selected">Default</option>
        <option value="black">Black</option>
        <option value="blue">Blue</option>
        <option value="brown">Brown</option>
        <option value="darkblue">Dark Blue</option>
        <option value="darkgreen">Dark Green</option>
        <option value="darkred">Dark Red</option>
        <option value="fuchsia">Fuchsia</option>
        <option value="green">Green</option>
        <option value="grey">Grey</option>
        <option value="#d3d3d3">Light Grey</option>
        <option value="#32cd32">Lime Green</option>
        <option value="#f8b040">Macaroni</option>
        <option value="#ff7300">Orange</option>
        <option value="pink">Pink</option>
        <option value="purple">Purple</option>
        <option value="red">Red</option>
        <option value="#0fcce0">Turquoise</option>
        <option value="white">White</option>
        <option value="yellow">Yellow</option>
    </select>
    <input type='button' onclick='setBGColor(); ' value="Page's Background" />
    <input type='button' onclick='setGLColor(); ' value="Gallery's Background" />
    <input type="button" onclick='setBGColor(); setGLColor(); ' value="Both" />
</div>
<div id='allowChange' style='clear:both; float:left; display:none; '>
 <input type='button' onclick="$('#allowChange').fadeOut('slow'); $('#giveChoices').fadeIn('slow'); " value='Change Colors'  />
</div>
</body>
</html>

【讨论】：