0

私の最初の投稿、こことjQueryの初心者...私は読んで、勉強して、jQueryの確かな背景を理解しようとしていますが、せっかちになって何かをしようと急いでいるのは仕方がありません！

このコードのビットは私を困惑させました。これは、私が何日もかけて組み立てて作業を試みてきた、Cookieを使用したシーケンシャルトグルバックグラウンドスイッチャーです。機能：4つの背景を順番に切り替え、アラートで確認されるため、毎回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が作成され、その値に1つの可能な値が設定されます（ハッシュボーン！/タイル！/ドット!!!! /行！）。現在の値が「タイル」であると想定します。ページが更新されると、bgSwitchはCookieの値（「タイル」）を取得します。だから実際にあなたはします：

$("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 に答える