Question

使用cookies，我希望它能记住页面的颜色布局。（因此，如果他们将画廊设置为一种颜色，而将身体背景设置为另一种颜色，则会在刷新时保存该颜色。但它似乎无法正常工作。

这是我的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/

的示例

Answer 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 设置为背景颜色，将上面的验证程序变量设置为2.

在加载页面时，您希望 verfier 的代码 2 。事实并非如此，javascript变量在会话中不是持久的。如果确实如此，我们就不需要cookie，我们会吗？

您的方法应该是两种不同的Cookie。 page_background 和 gallery_background 。页面加载时，您应检查这些cookie的值并相应地设置颜色。如果未设置cookie，则用户从不打算保存它们。

Answer 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>

记住页面的颜色布局

2 个答案: