Question

我有两个div s（staticclose和sads）。第一个是可见的，另一个是隐藏的。当我关闭第一个div时，第二个变为可见，当我点击第二个div时，第一个变为可见。如何使用jquery.cookie来记住div的状态？

$('.staticclose').click(function(){ 
  $('.static-ad').toggleClass('hide');
  $('.sads').toggleClass('hide');
});

$('.sads').click(function(){ 
  $('.static-ad').toggleClass('hide');
  $('.sads').toggleClass('hide'); 
});

Answer 1

您可以使用Cookie或HTML5存储空间。我更喜欢第二种选择。

https://github.com/carhartl/jquery-cookie

http://amplifyjs.com/api/store/

使用放大的简单示例。

首先存储对象。

amplify.store( "yourObject", { foo: "bar" } );

然后检索它。

var retrievedValue = amplify.store( "yourObject" );

使用jquery cookies的简单示例。

集：

$.cookie('staticclose', 'visible');
$.cookie('sads', 'invisible');

得到：

$.cookie('staticclose'); // "visible"
$.cookie('sads'); // "invisible"

无论如何，您可以使用数据属性来完成此任务。但是如果你的想法是在重新加载页面后记住状态，那么，请转到cookie的想法。

数据属性示例：

$("#div1").data("currentState", "visible");
$("#div2").data("currentState", "invisible");

要检索数据：

var div1 = $("#div1").data("currentState"); // It will be "visible"
var div2 = $("#div2").data("currentState"); // It will be "invisible"

Answer 2

在问题中使用jQuery.cookie时，您可以执行以下操作：

$('.staticclose').click(function(){ 
  $('.static-ad').toggleClass('hide');
  $('.sads').toggleClass('hide');
  $.cookie("last_state", "0", {path: "/"});
});

$('.sads').click(function(){ 
  $('.static-ad').toggleClass('hide');
  $('.sads').toggleClass('hide'); 
  $.cookie("last_state", "1", {path: "/"});
});
$(document).ready(function(){
  if ($.cookie("last_state") === "1") {
    //Do whatever you want
  } else {
    //Do whatever you want
  }
});

请记住使用jQuery Cookie的多个divs toggleClass

2 个答案: