ページのカラーレイアウトを覚えている

クッキーを使用して、ページのカラーレイアウトを覚えておきたいです。（彼らは1色とボディの背景別の色をギャラリーを設定するのであれば、それはリフレッシュにその保存されます。しかし、それは動作していないようですページのカラーレイアウトを覚えている

ここに私の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

あなたは、より分かりやすい質問タイトルを入力してくださいあなたのスニペットに無関係なコードの量... – bobbymcr

@bobbymcrありがとう、私はそれを整理します。 –

あなたの "検証者"の使用は私を混乱させる。 –

問題が

ですページがあるときに verfier がことを期待し、あなたのコードから2

に背景色と上記検証変数にtest_cookieを設定しているあなたのコード内で
if (verifier == 2) { $('#gallery').css('background', $.cookie('test_cookie')); } $('#set_gallery').click(function() { $('#gallery').css('background', $.cookie('test_cookie')); var verifier = 2; });

ロードされる。これは当てはまりませんが、javascript変数はセッション間で永続的ではありません。クッキーが必要な場合は必要ありません。？

あなたのアプローチは2つの異なるクッキーである必要があります。 page_backgroundおよびgallery_background。ページが読み込まれたら、これらのクッキーの値をチェックし、それに応じて色を設定する必要があります。クッキーが設定されていない場合、ユーザーは決してクッキーを保存することを心配しませんでした。ここ

出典

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

ページのカラーレイアウトを覚えている

答えて

関連する問題