3

私はいくつかのjQuery実験（ちょっとしたゲーム）で小さなサイトを作っています。各ゲームにはゴールがあり、ゴールが見つかってクリックされたときに、フッターのハート記号を永続的に変更したいと考えています。これにはCookieプラグインを使用しようとしています。

サブページの 1 つへのリンク: 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);
    });

});

何も起こらないので、何が間違っているのですか？編集：さらに重要なことは、それを修正するにはどうすればよいですか?

4

3 に答える 3

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

値ではなく名前でCookieを取得する必要があります:)

于 2012-10-19T07:18:25.057 に答える
2

間違っている点が 2 つあります。

初め、

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

上記の関数を使用して名前で Cookie を取得しようとしています。代わりに、値を渡しています。

Cookie パラメータは次のように設定されます。

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

したがって、Cookie の名前は「class」で、値は「found」です。

言い換えると

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-19T07:21:07.293 に答える
0

このプラグインを試してください: https://github.com/tanau-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-19T10:00:45.047 に答える