0

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

更改背景颜色的按钮

$(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）我如何总是携带用户选择的第一个颜色？

4

4 回答 4

1

正如您所拥有的，$(foo)（函数foo在哪里）意味着“等到文档加载后再调用”。如果你不这样做，你就不能保证你的HTMLElements存在。但是，如果您将调用移动到Node之后/子节点的 a ，您应该能够安全地假设它在调用代码时已经存在。foo<script>

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

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

throw这意味着它会在可以安全地假设它不会出错的时候被尽快调用。

于 2013-09-24T00:37:31.003 回答
0

说这是你的 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');
    });
});

编辑：更改我的答案，因为我刚刚意识到您的背景设置为与背景颜色分开。

为什么不简单地把它放在你的 head 标签中（在样式表下面）：

<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，则使用带点的背景色，如果没有 cookie，则使用带点的紫色背景色。”

此刻您说“将背景设置为紫色的 url，然后如果有 cookie，请更改颜色”

于 2013-09-24T01:34:37.427 回答
0

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

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

于 2013-09-24T05:20:50.700 回答
0

您是否尝试过使用本地存储来保存背景颜色 

$(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 本地存储

于 2013-09-24T06:01:08.260 回答