Fatal编程技术网
  • javascript/
  • Javascript 记住页面的颜色布局

Javascript 记住页面的颜色布局

javascript jquery css cookies

Javascript 记住页面的颜色布局,javascript,jquery,css,cookies,Javascript,Jquery,Css,Cookies,使用cookies，我希望它记住页面的颜色布局。因此，如果他们将库设置为一种颜色，而将身体背景设置为另一种颜色，则刷新时会保存该颜色。但它似乎不起作用 以下是我的JavaScript代码： $(document).ready(function() { if (verifier == 1) { $('body').css('background', $.cookie('test_cookie')); } if (verifier == 2) {

使用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>
下面是一个JSFIDLE示例：

您遇到的问题是

    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。页面背景和图库背景。当页面加载时，您应该检查这些cookies的值并相应地设置颜色。如果未设置cookies，用户就不会费心保存它们。

完整解决方案：

我无法使它在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();
});
如果你尝试一个更具描述性的问题标题，并减少代码片段中不相关的代码量，你就有更好的机会得到答案…@bobbymcr好的，谢谢，我会整理它。你使用验证器让我困惑。 
</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>