记住页面的颜色布局

使用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/

来源

2011-11-14 Doug Smith

如果您尝试使用更具描述性的问题标题和reduc，则您有更好的机会获得答案e你的片段中无关代码的数量... – bobbymcr

@bobbymcr好吧谢谢，我会整理它。 –

您对“验证者”的使用让我感到困惑。 –

你的问题是

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是页面时加载。这不是事实，JavaScript变量在会话中不是永久性的。如果是的话，我们不需要cookies，我们会？

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

来源

2011-11-14 01:47:18

这里充分的解决方案：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>

来源

2011-11-14 02:53:23

记住页面的颜色布局

回答

相关问题