Question

我不确定是否可以这样做。我是jQuery的新手:)

我找到了一种通过点击图片来更改背景的方法。但是当我刷新页面或更改为其他页面时，背景将更改为原始页面。

您知道是否有办法保留新背景？

这是我的代码：

<script>
    $(document).ready(function(){
        $("#mood-clasico").click(function(){
        $("#chef, #ranchos, #contacto").removeClass("parallax-4, parallax-2");
        $("#chef, #ranchos, #contacto").addClass("parallax-1");
        });
    });
    $(document).ready(function(){
        $("#mood-chef").click(function(){
        $("#chef, #ranchos, #contacto").removeClass("parallax-1, parallax-2");
        $("#chef, #ranchos, #contacto").addClass("parallax-4");
        });
    });
    $(document).ready(function(){
        $("#mood-kids").click(function(){
        $("#chef, #ranchos, #contacto").removeClass("parallax-1, parallax-4");
        $("#chef, #ranchos, #contacto").addClass("parallax-2");
        });
    });
</script>

Answer 1

使用jquery cookie插件执行此操作，

详情请https://github.com/carhartl/jquery-cookie

然后设置cookie，

$.cookie("changedBackground", 'true');

并在页面刷新后必须完成此检查

if($.cookie("changedBackground")=='true'){
//keep your changed background
}

Answer 2

如果您希望在窗口关闭或页面已离开（到另一个域）之后生存状态，请使用localStorage;否则，使用sessionStorage（仍然存在域内的刷新和导航）。无论哪种方式，您都希望将css类存储在持久变量中，并使用它来代替字符串，这可以帮助干掉代码。会话存储稍微简单一些，但是您的用户可能会更喜欢使用localStorage - 实现方式如下：

$(document).ready(function() {
  var userPref = localStorage.getItem("bg-class") || 'your-default';
  $("#chef, #ranchos, #contacto").addClass(userPref);

  $("#mood-clasico").click(function(){
    swapPref("parallax-4", "parallax-2", "parallax-1");
  });
  $("#mood-chef").click(function(){
    swapPref("parallax-1", "parallax-2", "parallax-4");
  });
  $("#mood-kids").click(function(){
    swapPref("parallax-4", "parallax-2", "parallax-1");
  });

  function swapPref(out1, out2, inn) {
    $("#chef, #ranchos, #contacto")
    .removeClass(userPref)
    .removeClass(out1)
    .removeClass(out2)
    .addClass(inn);
    localStorage.setItem("bg-class", inn);
  }
});

为了获得更多持久性（例如，跨越不同的浏览器或设备），您需要查看文件系统API或将设置存储在数据库中，但根据您的问题，这些选项似乎并非如此＆n值得的缺点。我遗漏了一些错误处理和您可能想要包含的内容，但我绝对建议您通过mozilla查看using the web storage api，其中包含一个类似的示例。

Answer 3

只有使用jQuery它是不可能的，你必须存储值
尝试使用会话，cockies，外部文件或数据库

我希望在页面中保持一个由jquery更改的类

3 个答案: