0

我的 cookie 有问题。我正在尝试存储在 cookie 中选择的选项。但我不明白为什么我的例子不起作用。

例如，不记住字体大小。这是我第一次使用jQuery.cookie。

HTML（在第一次选择中，选项内容图像更改背景）：

<h3>Seleccione un fondo de imagen</h3>
<select name="foo" id="foo" size="2">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
    <option value="4"></option>
    <option value="5"></option>
    <option value="6"></option>
</select>
<input type="button" id="button1" value="Establecer fondo" />

<h3>Seleccione una fuente</h3>
<select name="fuente" id="fuente" size="2" style='-moz-border-radius: 8px;'>
    <option value="1">Arial</option>
    <option value="2">Tahoma</option>
    <option value="3">Verdana</option>
</select>
<input type="button" id="button2" value="Establecer fuente" />

<h3>Seleccione un tama&ntilde;o de fuente</h3>
<select name="fuentesize" id="fuentesize" size="2" style='-moz-border-radius: 8px;'>
    <option value="1">8</option>
    <option value="2">10</option>
    <option value="3">12</option>
    <option value="4">14</option>
</select>
<input type="button" id="button3" value="Establecer tama&ntilde;o de fuente" />

<h3>Seleccione un color de fuente</h3>
<select name="fuentecolor" id="fuentecolor" size="2" style='-moz-border-radius: 8px;'>
    <option value="1">rojo</option>
    <option value="2">azul</option>
    <option value="3">verde</option>
    <option value="4">rosa</option>
</select>
<input type="button" id="button4" value="Establecer color de fuente" />

<h3>Seleccione un estilo para la fuente</h3>
<select name="fuentestilo" id="fuentestilo" size="2" style='-moz-border-radius: 8px;'>
    <option value="1">cursiva</option>
    <option value="2">subrayado</option>
    <option value="3">sin subrayado</option>
</select>
<input type="button" id="button5" value="Establecer estilo de fuente" />

JavaScript

$(document).ready(function() {
    var value;
    value = $.cookie("cookieFondo");
    if (value) {
        $("#foo").val(value);
    }
    value = $.cookie("cookieFuente");
    if (value) {
        $("#fuente").val(value);
    }
    var value;
    value = $.cookie("cookieFuenteSize");
    if (value) {
        $("#fuentesize").val(value);
    }
    value = $.cookie("cookieFuenteColor");
    if (value) {
        $("#fuentecolor").val(value);
    }
    value = $.cookie("cookieFuentEstilo");
    if (value) {
        $("#fuentestilo").val(value);
    }


    $('#button1').click(function() {
        //alert($('#foo option:selected').text());
        var bg = $('#foo').val();
        if(bg==1){
            $('body').css('background-image', 'url(img/bg00.png)');
            $.cookie("cookieFondo", bg);
        }
        if(bg==2){
            $('body').css('background-image', 'url(img/bg01.png)');
            $.cookie("cookieFondo", bg);
        }
        if(bg==3){
            $('body').css('background-image', 'url(img/bg02.png)');
            $.cookie("cookieFondo", bg);
        }
        if(bg==4){
            $('body').css('background-image', 'url(img/bg03.png)');
            $.cookie("cookieFondo", bg);
        }
        if(bg==5){
            $('body').css('background-image', 'url(img/bg04.png)');
            $.cookie("cookieFondo", bg);
        }
        if(bg==6){
            $('body').css('background-image', 'url(img/bg05.png)');
            $.cookie("cookieFondo", bg);
        }
    });


    $('#button2').click(function() {
        //alert($('#foo option:selected').text());
       var font = $('#fuente').val();
           if(font==1){
            $('body').css('font-family', 'Arial');
            $.cookie("cookieFuente", font);
        }
        if(font==2){
            $('body').css('font-family', 'Tahoma');
            $.cookie("cookieFuente", font);
        }
        if(font==3){
            $('body').css('font-family', 'Verdana');
            $.cookie("cookieFuente", font);
        }
    });

    $('#button3').click(function() {
        //alert($('#foo option:selected').text());
       var fontsize = $('#fuentesize').val();
           if(fontsize==1){
            $('body').css('font-size', 8);
            $.cookie("cookieFuenteSize", fontsize);
        }
        if(fontsize==2){
            $('body').css('font-size', 10);
            $.cookie("cookieFuenteSize", fontsize);
        }
        if(fontsize==3){
            $('body').css('font-size', 12);
            $.cookie("cookieFuenteSize", fontsize);
        }
        if(fontsize==4){
            $('body').css('font-size', 14);
            $.cookie("cookieFuenteSize", fontsize);
        }
    });

    $('#button4').click(function() {
        //alert($('#foo option:selected').text());
       var fontcolor = $('#fuentecolor').val();
           if(fontcolor==1){
            $('body').css('color', 'red');
            $.cookie("cookieFuenteColor", fontcolor);
        }
        if(fontcolor==2){
            $('body').css('color', 'blue');
            $.cookie("cookieFuenteColor", fontcolor);
        }
        if(fontcolor==3){
            $('body').css('color', 'green');
            $.cookie("cookieFuenteColor", fontcolor);
        }
        if(fontcolor==4){
            $('body').css('color', 'pink');
            $.cookie("cookieFuenteColor", fontcolor);
        }
    });

    $('#button5').click(function() {
        //alert($('#foo option:selected').text());
       var fontstyle = $('#fuentestilo').val();
           if(fontstyle==1){
            $('body').css('font-style', 'italic');
            $.cookie("cookieFuentEstilo", fontstyle);
        }
        if(fontstyle==2){
            $('body').css('text-decoration', 'underline');
            $.cookie("cookieFuentEstilo", fontstyle);
        }
        if(fontstyle==3){
            $('body').css('text-decoration' , 'none');
            $.cookie("cookieFuentEstilo", fontstyle);
        }
    });
});
4

1 回答 1

0

You are saving values into cookies, but when the page loads, you are not reading the cookies to initialize the state of your page from the values stored in the cookies.

You need to do something like this:

$(document).ready(function() {
    var value;
    value = $.cookie("cookieFondo");
    if (value) {
         $("#foo").val(value);
    }
    value = $.cookie("cookieFuente");
    if (value) {
         $("#fuente").val(value);
    }
    // ... more here
});

Or a more DRY version using a table would be like this:

$(document).ready(function() {
    var value;
    var items = [
        "cookieFondo", "#foo",
        "cookieFuente", "#fuente"
        // list more items here
    ];
    for (var i = 0; i < items.length; i+=2) {
        value = $.cookie(items[i]);
        if (value) {
            $(items[i+1]).val(value);
        }
    }
});
于 2013-02-10T13:59:21.373 回答