Question

尝试将身体背景图案更改为单击的相应缩略图，然后使用cookie保存，切换正常但在刷新页面时不会保存cookie。

这是正确的方法吗？

有人可以帮忙吗？

<script type="text/javascript">
     function changeBg(bgImage) {
                $("body").css({"background-image": bgImage});
                $.cookie("bgimg", bgImage, { expires: 7});
            }


            $('.bgswitch.pat1').click(function()
            {   
                changeBg("url(/images/patterns/p1.png)");
            });

            $('.bgswitch.pat2').click(function()
            {
                changeBg("url(/images/patterns/p2.png)"); 
            });
            $('.bgswitch.pat3').click(function()
            {
                changeBg("url(/images/patterns/p3.png)"); 
            });
            $('.bgswitch.pat4').click(function()
            {
                changeBg("url(/images/patterns/p3.png)"); 
            });
            $('.bgswitch.pat5').click(function()
            {
                changeBg("url(/images/patterns/p4.png)"); 
            });
            $('.bgswitch.pat5').click(function()
            {
                changeBg("url(/images/patterns/p5.png)"); 
            });
            $('.bgswitch.pat6').click(function()
            {
                changeBg("url(/images/patterns/p6.png)"); 
            });
            $('.bgswitch.pat7').click(function()
            {
                changeBg("url(/images/patterns/p7.png)"); 
            });
            $('.bgswitch.pat8').click(function()
            {
                changeBg("url(/images/patterns/p8.png)"); 
            });
            $('.bgswitch.pat9').click(function()
            {
                changeBg("url(/images/patterns/p9.png)"); 
            });
            $('.bgswitch.pat10').click(function()
            {
                changeBg("url(/images/patterns/p10.png)"); 
            });
</script>

Answer 1

使用jquery ready事件在页面刷新时设置背景图案，如下所示

$(document).ready(function(){
   $("body").css({ "background-image": $.cookie("bgimg") });
});

你也可以为所有缩略图分配像“拇指”这样的css类，并优化你的代码，如

$(document).ready(function(){

   /* for page refresh */
   $("body").css({ "background-image": $.cookie("bgimg") });

   /* for thumbnail click event */
   $(".thumb").click(function(){
      $("body").css({"background-image": $(this).attr('src')});
      $.cookie("bgimg", "url("+ $(this).attr('src') +")", { expires: 7});
   });

});

这就是你所需要的一切。

更改背景图像并设置cookie

1 个答案: