我想在页面上保留jquery更改的类。

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

如果希望状态在窗口关闭或页面被导航到不同的域后继续存在，请使用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或将设置存储在数据库中，但基于您的问题，这些选项似乎不值得有缺点。我遗漏了一些错误处理和您可能想要包含的内容，但我肯定会推荐查看mozilla的使用web存储api，其中实际上包含了一个类似的示例。

Answer 2

使用插件来完成这个任务，

这里的详细信息，https://github.com/carhartl/jquery-cookie

然后设定曲奇，

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

页面刷新后，必须执行此检查。

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

Answer 3

只有使用jQuery才不可能，您必须存储值

尝试使用会话、座舱、外部文件或数据库。