Question

我的第一篇文章，新手在这里和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>

Answer 1

当您切换切换器时，您创建一个cookie，将其值设置为一个可能的值（主题词！/ tiles！/ DOTS !!!! / lines！）。假设当前值是“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)");
  }
);

希望这有帮助！

带有cookie的CSS背景图像切换器：“设置”但不“获取”！

1 个答案: