使用cookies永久更改CSS

我正在製作一些帶有一些jQuery實驗的小型網站（有點兒噱頭）。在每場比賽中都有一個目標，當目標被找到並點擊時，我想對腳註中的心臟符號進行永久更改。我正在嘗試爲此使用cookie插件。使用cookies永久更改CSS

子頁面的一個鏈接：http://www.carlpapworth.com/htmlove/arrows.html

這裏的頁腳CSS：

footer{ 
position: fixed; 
bottom: 0px; 
padding: 10px; 
width: 100%; 
height: 100px; 
background: /*url(../images/bgFooter.png)*/ #dddddd; 
z-index: 2000; 
} 

.heartCollection{ 
width: 940px; 
margin: 0 auto; 
text-align: justify; 
} 

.heartCollection p{ 
font-size: 13px; 
float: none; 
width: 100%; 
padding: 0; 
margin: 0 0 -20px 0; 
text-align: center; 
position: relative; 
} 

.heartCollection ul li{ 
width: auto; 
display: inline; 
list-style: none; 
float: left; 
margin: 10px 0 -10px 0; 
padding: 0 0 0 98px; 
font-size: 70px; 
} 

.heartCollection ul li a{ 
font-family: menlo; 
color: #cccccc; 
} 

.found{ 
color: #ff63ff; 
} 

.credits{ 
width: 100%; 
height: auto; 
margin: 80px auto; 
bottom: 0px; 
left: -40px; 
position: relative; 
text-align: right; 
}

這裏是JavaScript的：

$(document).ready(function() { 
    //help 
    $('#helpInfo').hide(); 
    $('#help h2').click(function(){ 
     $('#helpInfo').show(300); 
    }); 
    $('#helpInfo').click(function() { 
     $(this).hide(300); 
    }); 
    //reward 
    $('#reward').hide(); 
    $('#goal a').click(function(){ 
     $('#reward').fadeIn(1000); 
    }); 
    //Collection 
    $.cookie('class','found',{ 
    }); 
    var foundHeart = $.cookie('found'); 
    $('.exit').click(function(){ 
     $('#collection1').addClass(foundHeart); 
    }); 

});

那麼什麼都不會發生，所以我在做什麼錯？編輯：更重要的是，我應該怎麼做才能解決它？

來源

2012-10-19 Carl Papworth

你剛剛創建了另一個遊戲：找到bug！ –

RomanTheGreat是對的，你試圖獲得一個名爲'found'的cookie，而名字實際上是'class'。無論如何，我喜歡這個主意！已收藏;） –

酷，嗯，我還沒有得到它的工作，但如果它會整潔:) –

有兩點錯誤：

首先，

var foundHeart = $.cookie('found');

你試圖獲取餅乾通過名稱與上述功能。相反，你傳遞的價值。

$.cookie('name', 'value', { options });

所以你的cookie的名稱是「類」和值「發現」：

該Cookie PARAMS設置如下。

換句話說

var foundHeart = $.cookie('found');

應該

var foundHeart = $.cookie('class');

其次，即使你改正，你打算你的代碼將無法正常工作。爲什麼？因爲您在加載時設置了Cookie。

該行設置的cookie：

$.cookie('name', 'value');

但你的文檔準備功能中運行它。

你應該移到該行進入這個功能：

$('#goal a').click(function(){ 
    $('#reward').fadeIn(1000); 
    // moved set cookie function here 
    $.cookie('class', 'found'); 
});

因此，它只有當你的目標設定。

來源

2012-10-19 07:21:07 Choy

你的意思就像'var = foundHeart'上面的行？編輯：所以我應該切出上面的var行，並粘貼= =後？ –

即便如此，它仍然無法工作> _ < –

我已經添加了其他解釋。修復Cookie調用後，您是主要問題，因爲您正在將其設置爲負載。 – Choy

var foundHeart = $.cookie('class');

你應該得到的值通過名稱的Cookie沒有：）

來源

2012-10-19 07:18:25 RomanTheGreat

O，我該怎麼做？我很新的JavaScript ... –

改變你的線我的 – RomanTheGreat

對不起，我很愚蠢:) –

試試這個插件： https://github.com/tantau-horia/jquery-SuperCookie

創建心臟默認的cookie，如果它不存在：

//name of the cookie: hearts 
//name of the hearts: h1,h2,h3,h4,h5,h6 
//values: 1 if active, 0 if inactive 
if (!$.super_cookie().check("hearts")) { 
    $.super_cookie().create("hearts",{h1:"0",h2:"0",h3:"0",h4:"0",h5:"0",h6:"0"}); 
};

當目標被發現（例如目標1）

$("#collection1").addClass('foundHeart'); 
$.super_cookie().replace_value("hearts","h1","1")

在頁面重新加載時記住心臟是否被選中

if ($.super_cookie().read_value("hearts","h1") == "1") { 
    $("#collection1").addClass('foundHeart'); 
};

來源

2012-10-19 10:00:45

很酷我一定會試試這個:) –

使用cookies永久更改CSS

回答

相關問題