Question

我正在开发一个博客，访问者可以通过点击其中一个按钮来更改背景颜色。

Buttons to change the background color

$(function(){

        //Verificando se já existe algum esquema de cor selecionado
        var esquemaCor = parseInt(getCookie("cor_de_fundo"));

        switch(esquemaCor){
            case 1:
                $('body').css('background-color','#0A0A0A');
                break;
            case 2:
                $('body').css('background-color','#766777');
                break;
            case 3:
                $('body').css('background-color','#EEE6EE');
                break;
            case 4:
                $('body').css('background-color','#9F00A9');
                break;
            case 5:
                $('body').css('background-color','#420668');
                break;
            default:
                $('body').css('background-color','#9F00A9');
        }

        $('#cor_01').click(function(){
            setCookie('cor_de_fundo', 1);
            $('body').css('background-color','#0A0A0A');
        });
        $('#cor_02').click(function(){
            setCookie('cor_de_fundo', 2);
            $('body').css('background-color','#766777');
        });
        $('#cor_03').click(function(){
            setCookie('cor_de_fundo', 3);
            $('body').css('background-color','#EEE6EE');
        });
        $('#cor_04').click(function(){
            setCookie('cor_de_fundo', 4);
            $('body').css('background-color','#9F00A9');
        });
        $('#cor_05').click(function(){
            setCookie('cor_de_fundo', 5);
            $('body').css('background-color','#420668');
        });
    });

标准颜色是紫色博客。

background: # 9F00A9

当用户更改按钮事件的背景颜色时，效果非常好。问题出在他在博客页面之间导航时。在充电他选择的颜色之前，例如在紫色到黑色之后首先加载黑色背景颜色。（参加测试博客：www.obovio.com.br）如何始终携带用户选择的第一种颜色？

Answer 1

如上所述，$(foo)（其中foo是函数）表示“等到文档加载后再调用foo”。如果您不这样做，则无法保证 HTMLElements 存在。但是，如果将调用移动到节点的子节点之后的<script>，则应该能够安全地假设它在调用代码时存在。

例如，由于函数仅使用<body>元素，因此请将其命名为 foo ，然后执行

<body>
    <script type="text/javascript">
foo();
    </script>
    <!-- rest of body contents -->
</body>

这意味着它会尽快被调用，因为可以安全地假设它不会throw出错。

Answer 2

说这是你的HTML

 <body>
 <script>
 $( document ).ready(function() {
     //by assigning this to a function you ensure the page has loaded and it exists before you call it too early
     backgroundColour(getCookie("cor_de_fundo"));
 });
 </script>
</body>

这是你的新功能： function backgroundColour（cookie）{

    //Verificando se já existe algum esquema de cor selecionado
    var esquemaCor = parseInt(cookie);
    //This way there is never a risk of auto-default unless the cookie is empty, but this is option, can probably keep using default anyway
    if(!esquemaCor) {
        $('body').css('background-color','#9F00A9');
    }
    else {
    switch(esquemaCor){
        case 1:
            $('body').css('background-color','#0A0A0A');
            break;
        case 2:
            $('body').css('background-color','#766777');
            break;
        case 3:
            $('body').css('background-color','#EEE6EE');
            break;
        case 4:
            $('body').css('background-color','#9F00A9');
            break;
        case 5:
            $('body').css('background-color','#420668');
            break;
    }

    $('#cor_01').click(function(){
        setCookie('cor_de_fundo', 1);
        $('body').css('background-color','#0A0A0A');
    });
    $('#cor_02').click(function(){
        setCookie('cor_de_fundo', 2);
        $('body').css('background-color','#766777');
    });
    $('#cor_03').click(function(){
        setCookie('cor_de_fundo', 3);
        $('body').css('background-color','#EEE6EE');
    });
    $('#cor_04').click(function(){
        setCookie('cor_de_fundo', 4);
        $('body').css('background-color','#9F00A9');
    });
    $('#cor_05').click(function(){
        setCookie('cor_de_fundo', 5);
        $('body').css('background-color','#420668');
    });
});

编辑：更改我的答案，因为我刚刚意识到你的背景被设置为背景颜色。

为什么不简单地将它放在头标记中（在样式表下面）：

<script>
if (getCookie("cor_de_fundo")) {
$('body').css('background','url("http://4.bp.blogspot.com/-SZodpKgdjwk/UkCj20gd4XI/AAAAAAAADZk/tIAmBbkoecU/s1600/square_bg.png") repeat');
}
</script>

这样，如果设置了cookie，你会得到你的点数，但你会失去那个紫色。所以这个问题永远不会发生？

看起来你的逻辑可能是错误的。

你说的是“带有圆点的紫色背景。如果有饼干，请在背景上加点背景颜色。

相反，为什么不说“如果有饼干，用点加背景颜色，如果没有饼干，则用背景颜色加紫色点。”

当你说“将背景设置为紫色的网址时，如果有cookie，请更改颜色”

Answer 3

听起来你想要历史api，以防止再次加载整个页面？ http://diveintohtml5.info/history.html

该示例不需要任何页面重新加载： http://diveintohtml5.info/examples/history/casey.html

Answer 4

您是否尝试过使用localstorage来保存背景颜色

$(function(){
 if(localStorage.bgcolor==undefined)
    localStorage.bgcolor="white" //default color that appears first time

 $('body').css('background-color',localStorage.bgcolor);

   $('#cor_01').click(function(){
     localStorage.bgcolor = "#0A0A0A";
     $('body').css('background-color',localStorage.bgcolor);
   });
   $('#cor_02').click(function(){
     localStorage.bgcolor = "#766777"
     $('body').css('background-color',localStorage.bgcolor);
   });
   // similar code for other buttons
});

HTML5 local storage

如何在CSS代码之前加载jQuery？

4 个答案: