0

クッキーに問題があります。選択したオプションを 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

値を Cookie に保存していますが、ページの読み込み時に Cookie を読み取って、Cookie に保存されている値からページの状態を初期化していません。

次のようなことをする必要があります：

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

または、テーブルを使用したより DRY バージョンは次のようになります。

$(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 に答える