0

我的第一篇文章，这里是 jQuery 的新手……我正在阅读、学习，试图对 jQuery 有一个扎实的背景理解，但我不禁不耐烦并开始尝试做一些事情！

这段代码让我很困惑。这是一个带有 cookie 的顺序切换背景切换器，我花了几天时间整理并尝试制作它。什么有效：它在四个背景之间依次切换，并且每次似乎都设置一个cookie，因为警报确认了它。什么不起作用：背景选择不会“粘住”。当我刷新页面时，背景将返回到 css 设置的默认值。我知道有一些小而关键的问题是错误的，我花了很多时间通过查看其他示例来解决这个问题，这里是 SO 和其他地方。但是我发现没有其他示例像这样按顺序使用切换。所以，寻求一点帮助，并提前感谢！

我正在使用 jquery-1.7.2 和 jquery.cookie 插件。

<script type="text/javascript">
$(document).ready(function() {
var bgSwitch = $.cookie("oink");
if (bgSwitch) {
    $("body").css("background-image", bgSwitch);
}
   });
        alert( $.cookie("oink") );
$("#switcher").toggle(
  function () {
    $("body").css({"background-image": "url(images/background/hashbones.gif)"});
                $.cookie("oink", "hashbones!", { expires: 7});
  },
  function () {
    $("body").css({"background-image": "url(images/background/pattern-tile-3.gif)"});
                $.cookie("oink", "tiles!", { expires: 7});
  },
  function () {
    $("body").css({"background-image": "url(images/background/dots.gif)"});
                $.cookie("oink", "DOTS!!!!", { expires: 7});
  },
  function () {
    $("body").css({"background-image": "url(images/background/lines-diag-8px.gif)"});
                $.cookie("oink", "lines again!", { expires: 7});
  }
);
</script>
<style>
body { background: #fff url(images/background/lines-diag-8px.gif) repeat; }  
</style>
4

1 回答 1

0

当您切换切换器时，您会创建一个 cookie，将其值设置为一个可能的值（hashbones！/tiles！/ DOTS !!!! /lines again！）。假设当前值为“tiles！”。当页面刷新时，bgSwitch 获取 cookie 的值 - “tiles!”。所以实际上你这样做：

$("body").css("background-image", "tiles!");

这什么都没有。

将 cookie 的可能值更改为图像本身。就像是：

function changeBg(bgImage) {
    $("body").css({"background-image": bgImage});
    $.cookie("oink", bgImage, { expires: 7});
}

$("#switcher").toggle(
  function () {
    changeBg("url(images/background/hashbones.gif)");
  },
  function () {
    changeBg("url(images/background/pattern-tile-3.gif)");
  },
  function () {
    changeBg("url(images/background/dots.gif)");
  },
  function () {
    changeBg("url(images/background/lines-diag-8px.gif)");
  }
);

希望这可以帮助！

于 2012-07-11T05:37:01.413 回答