0

ユーザーが「生成」ボタンをクリックするたびに、空の div にフレーズを追加する単純なランダム フレーズ ジェネレーターを作成しました。クリックするたびに、フレーズが再生成されます。その部分は魅力のように機能します。

特定の各ユーザーが生成した最後の 5 つのフレーズを表示したかったのです (サイトの最後の 5 人のユーザーが生成したものではありません)。つまり、ユーザーが「生成」ボタンをクリックするたびに生成された最後の 5 つのフレーズの結果を表示します。

これを行う最も簡単な方法は、生成されたフレーズごとに Cookie を作成し、それらの Cookie のそれぞれのコンテンツを表示することだと (おそらく間違って) 考えました。

だから、私はjquery.cookie pluginを見つけました。これは、誰かがこれを使用してボタンをクリックしたときに、なんとか機能し、Cookie を作成することができました。

$(document).ready(function(){
$("#button").click(function () {
$.cookie('cookie_1', $('#phrase_here').text(), { expires: 7 });
})
});

問題は、最後の 5 つのフレーズを保存したいということです。上記を使用すると、クリックごとに Cookie が上書きされます。だから、私はこのようなものがうまくいくと思った：

if($.cookie('cookie_1') == null) {
$(document).ready(function(){
$("#button").click(function () {
$.cookie('cookie_1', $('#phrase_here').text(), { expires: 7 });
})
});
}
else{
$("#button").click(function () {
$.cookie('cookie_2', $('#phrase_here').text(), { expires: 7 });
})
};

しかし、これが起こっていることです。ボタンをクリックすると、「#phrase_here」という div 内のテキストで cookie_1 が設定されます。ボタンをもう一度クリックすると、cookie_1 が「#phrase_here」div の新しいフレーズに変更されます。上記のステートメントは、cookie_1 が存在するかどうかを確認し、存在する場合は、新しい別の Cookie (cookie_2) を作成すると考えました。ボタンをクリックしてページをリロードすると、cookie_1 がまだ設定されています。しかし、ボタンをクリックすると、cookie_1 ではなく cookie_2 が設定されます。この動作を引き起こすためにページのリロードが必要な理由がわかりません(これが私が望んでいることです)。

最終的に、Cookie がない場合は作成するという同じロジックを使用して、5 つの Cookie を保存したいと考えています。5 個になったら、cookie_1 を上書きします。cookie_2 を上書きするようなものを書くことはできないと思うので、その後どうするかはわかりません。

明らかに、これを行うためのより良い方法があります。データベースの使用を避け、ブラウザですべてを実行しようとしています。これが可能なことを制限し、すべての人にうまくいくとは限りませんが、それは問題ありません。とりあえず実験です。

私は、JavaScript、jQuery、または必要に応じて PHP を使用することにオープンです。私はそれを行う最善の方法がわかりません。質問が理にかなっていることを願っています。

更新:このコードは、上書きせずに 5 つの Cookie を作成するのに適しています。ここでのコツは、5 つの Cookie が作成されたら最初の Cookie を上書きし、次に 2 番目の Cookie を上書きする方法です。

4

4 に答える 4

0

ブラウザー セッションを超えて最後の 5 フレーズを永続化する必要がないため (コメントによると)、値をメモリに保存していただけますか?

$(document).ready(function () {

    var game = (function () {

        var phrases = [];

        return {

            store: function (phrase) {
                phrases.push(phrase);
                game.refresh();
            },

            refresh: function () {
                // clear your container displaying the last 5 phrases
                // loop over phrases 0-5 and display in your container
            }
        };

    }());

    $('#button').click(function (e) {
        e.preventDefault();
        var phrase = $('#phrase_here').text();
        game.store(phrase);
    });

});
于 2013-07-10T12:18:07.063 に答える