記住不同樣式表的Cookie問題

我正在創建一個允許用戶更改顏色方案和文本大小的網站。我使用的是cookies，所以當他們更改頁面時，它會記住他們選擇的顏色方案/文本大小。記住不同樣式表的Cookie問題

問題是，網站不能正確「記住」顏色方案和字體在同一時間。

當只使用一個或另一個時，它可以很好地工作，例如，當選擇顏色方案時，它會記住每個頁面上的選定顏色方案。

但是，當我更改顏色方案並嘗試更改字體大小時，網站停止記住所選顏色方案並返回到默認顏色方案（但確實記得文字大小）。

我猜這是因爲我設置了兩個餅乾而不是一個餅乾，但是在嘗試設置一個餅乾時我無法獲取代碼。

<link class="changeme" rel="stylesheet" type="text/css" href="default.css"  title="Standard" /> 
<link rel="stylesheet" type="text/css" href="twitter/jquery.jtweetsanywhere-1.3.1.css" /> 

<!-- Loading Javascript --> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" language="javascript" src="jquery.cookie.js"></script> 
<script type="text/javascript" src="twitter/jquery.jtweetsanywhere-1.3.1.js"></script> 
<script>  if($.cookie("css")) { 
    $("link.changeme").attr("href",$.cookie("css")); 
    } 
$(document).ready(function() { 
    $("#nav li a").click(function() { 
    $("link.changeme").attr("href",$(this).attr('rel')); 
    $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'}); 
    return false; 
    }); 
}); 
</script> 
<script> 
    if($.cookie("css2")) { 
    $("link.changeme").attr("href",$.cookie("css2")); 
    } 
$(document).ready(function() { 
    $("#resize li a").click(function() { 
    $("link.changeme").attr("href",$(this).attr('rel')); 
    $.cookie("css2",$(this).attr('rel'), {expires: 365, path: '/'}); 
    return false; 
    }); 
}); 
</script>

更改樣式

<div id="colourscheme"> 
<ul id="nav"> 
<li><a class="colourtext">Colour Scheme: </a></li> 
<li><a class="default" href="#" rel="default.css">Default</a></li> 
<li><a class="wandb" href="#" rel="alternative.css">White and Black</a></li> 
</ul>

<!-- Adjust font size --> 
<div id="textadjustment"> 
<ul id="resize"> 
<li><a class="textsize">Resize Text: </a></li> 
<li><a class="small" href="#" rel="default.css">A</a></li> 
<li><a class="medium" href="#" rel="large.css">A</a></li> 
<li><a class="large" href="#" rel="largest.css">A</a></li> 
</ul> 
</div>

我還在學習這個所以道歉，如果是一些簡單的回答！

來源

2013-02-26 warnerr

這兩個腳本被設置「link.changeme」選擇結果的相同href屬性。因此，第一個腳本從「css」加載cookie並將其存儲在$（'link.changeme'）的href中，然後第二個腳本從「css2」加載cookie並將其存儲在$（'link.changeme'）的href中覆蓋那裏的東西。 – Rich 2013-02-26 22:14:38

嗯，這是有道理的，你有什麼建議我可以修復它嗎？謝謝您的回覆。 – warnerr 2013-02-26 22:19:14

謝謝你的幫助，但它仍然不想工作。我改變顏色方案，工作，但是當改變字體大小時，它跳回到默認的顏色方案。是因爲我使用了兩個餅乾而不是一個？ – warnerr 2013-02-26 23:17:17

使用兩個樣式表引用。

HTML文檔

<!doctype html> 
<html> 
    <head> 
    <link class="colorCss" rel="stylesheet" type="text/css" href="defaultColor.css" /> 
    <link class="fontCss" rel="stylesheet" type="text/css" href="defaultFont.css" /> 
    <link rel="stylesheet" type="text/css" 
     href="twitter/jquery.jtweetsanywhere-1.3.1.css" /> 

    <!-- Loading Javascript --> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" language="javascript" src="jquery.cookie.js"></script> 
    <script type="text/javascript" src="twitter/jquery.jtweetsanywhere-1.3.1.js"></script> 

    <script type="text/javascript">  

     if($.cookie("css")) { 
     $("link.colorCss").attr("href",$.cookie("css")); 
     } 

     if($.cookie("css2")) { 

     $("link.fontCss").attr("href",$.cookie("css2")); 
     } 

     $(document).ready(function() { 
     $("#nav li a").click(function() { 
     $("link.colorCss").attr("href",$(this).attr('rel')); 
     $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'}); 
     return false; 
     }); 

     $("#resize li a").click(function() { 

     $("link.fontCss").attr("href",$(this).attr('rel')); 

     $.cookie("css2",$(this).attr('rel'), {expires: 365, path: '/'}); 
     return false; 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <div id="colourscheme"> 
     <ul id="nav"> 
     <li><span class="colourtext">Colour Scheme: </span></li> 
     <li><a class="default" href="#" rel="defaultColor.css">Default</a></li> 
     <li><a class="wandb" href="#" rel="alternative.css">White and Black</a></li> 
     </ul> 
    </div> 

    <div id="textadjustment"> 
     <ul id="resize"> 
     <li><span class="textsize">Resize Text: </span></li> 
     <li><a class="small" href="#" rel="defaultFont.css">Default</a></li> 
     <li><a class="medium" href="#" rel="large.css">Large</a></li> 
     <li><a class="large" href="#" rel="largest.css">Largest</a></li> 
     </ul> 
    </div> 
    </body> 
</html>

defaultColor.css

body { 
    background-color: #aa0000; 
    color: #0000aa; 
}

defaultFont.css

body { 
    font-size: 12px; 
}

alternative.css

body { 
    background-color: #000; 
    color: #aaa; 
}

個

large.css

body { 
    font-size: 14px; 
}

largest.css

body { 
    font-size: 18px; 
}

來源

2013-02-26 22:24:51 Rich

記住不同樣式表的Cookie問題

回答

相關問題