使用jquerycookie记住在页面刷新时切换哪个div

如何使用jquery设置cookie以记住切换了哪个div，并在刷新页面时保持切换状态

/************jQuery Cookie**************/
;(function(g){g.cookie=function(h,b,a){if(1<arguments.length&&(!/Object/.test(Object.prototype.toString.call(b))||null===b||void 0===b)){a=g.extend({},a);
if(null===b||void 0===b)a.expires=-1;
if("number"===typeof a.expires){var d=a.expires,c=a.expires=new Date;
c.setDate(c.getDate()+d)}b=""+b;
return document.cookie=[encodeURIComponent(h),"=",a.raw?b:encodeURIComponent(b),a.expires?";
expires="+a.expires.toUTCString():"",a.path?";
path="+a.path:"",a.domain?";
domain="+a.domain:"",a.secure?";
secure":
""].join("")}for(var a=b||{},d=a.raw?function(a){return a}:decodeURIComponent,c=document.cookie.split("; "),e=0,f;f=c[e]&&c[e].split("=");
e++)if(d(f[0])===h)return d(f[1]||"");
return null}})(jQuery);

if ($.cookie('showDiv') == 'newboxes2'){
 newboxes2.show();
}

if ($.cookie('showDiv') == 'newboxes3'){
 newboxes3.show();
}

function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
         $(this).show(200);
         $.cookie('showDiv', thechosenone);
    }
    else {
         $(this).hide(600);
    }
});
}

我已经尝试了很多解决方案，几乎已经找到了答案，但是我在设置和检索cookie时遇到了困难

My HTML:
<a href="javascript:showonlyone('newboxes2');" >Login</a>
<a href="javascript:showonlyone('newboxes3');" >Register</a>

<div class="newboxes" id="newboxes1" style="display: block">
   default text to be shown when no cookies are set
</div>

<div class="newboxes" id="newboxes2" style="display: none">
login form
</div>

<div class="newboxes" id="newboxes3" style="display: none"> 
register form       
</div>  

/************jQuery Cookie**************/
;(function(g){g.cookie=function(h,b,a){if(1<arguments.length&&(!/Object/.test(Object.prototype.toString.call(b))||null===b||void 0===b)){a=g.extend({},a);
if(null===b||void 0===b)a.expires=-1;
if("number"===typeof a.expires){var d=a.expires,c=a.expires=new Date;
c.setDate(c.getDate()+d)}b=""+b;
return document.cookie=[encodeURIComponent(h),"=",a.raw?b:encodeURIComponent(b),a.expires?";
expires="+a.expires.toUTCString():"",a.path?";
path="+a.path:"",a.domain?";
domain="+a.domain:"",a.secure?";
secure":
""].join("")}for(var a=b||{},d=a.raw?function(a){return a}:decodeURIComponent,c=document.cookie.split("; "),e=0,f;f=c[e]&&c[e].split("=");
e++)if(d(f[0])===h)return d(f[1]||"");
return null}})(jQuery);

if ($.cookie('showDiv') == 'newboxes2'){
 newboxes2.show();
}

if ($.cookie('showDiv') == 'newboxes3'){
 newboxes3.show();
}

function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
         $(this).show(200);
         $.cookie('showDiv', thechosenone);
    }
    else {
         $(this).hide(600);
    }
});
}

我的HTML:
未设置Cookie时显示的默认文本
登录表单
登记表

我的剧本：

/************jQuery Cookie**************/
;(function(g){g.cookie=function(h,b,a){if(1<arguments.length&&(!/Object/.test(Object.prototype.toString.call(b))||null===b||void 0===b)){a=g.extend({},a);
if(null===b||void 0===b)a.expires=-1;
if("number"===typeof a.expires){var d=a.expires,c=a.expires=new Date;
c.setDate(c.getDate()+d)}b=""+b;
return document.cookie=[encodeURIComponent(h),"=",a.raw?b:encodeURIComponent(b),a.expires?";
expires="+a.expires.toUTCString():"",a.path?";
path="+a.path:"",a.domain?";
domain="+a.domain:"",a.secure?";
secure":
""].join("")}for(var a=b||{},d=a.raw?function(a){return a}:decodeURIComponent,c=document.cookie.split("; "),e=0,f;f=c[e]&&c[e].split("=");
e++)if(d(f[0])===h)return d(f[1]||"");
return null}})(jQuery);

if ($.cookie('showDiv') == 'newboxes2'){
 newboxes2.show();
}

if ($.cookie('showDiv') == 'newboxes3'){
 newboxes3.show();
}

function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
         $(this).show(200);
         $.cookie('showDiv', thechosenone);
    }
    else {
         $(this).hide(600);
    }
});
}

/**********jQuery Cookie**************/
;（function（g）{g.cookie=function（h，b，a）{if（1）但那把小提琴不能满足我的需要，我只是借用了cookie代码

/************jQuery Cookie**************/
;(function(g){g.cookie=function(h,b,a){if(1<arguments.length&&(!/Object/.test(Object.prototype.toString.call(b))||null===b||void 0===b)){a=g.extend({},a);
if(null===b||void 0===b)a.expires=-1;
if("number"===typeof a.expires){var d=a.expires,c=a.expires=new Date;
c.setDate(c.getDate()+d)}b=""+b;
return document.cookie=[encodeURIComponent(h),"=",a.raw?b:encodeURIComponent(b),a.expires?";
expires="+a.expires.toUTCString():"",a.path?";
path="+a.path:"",a.domain?";
domain="+a.domain:"",a.secure?";
secure":
""].join("")}for(var a=b||{},d=a.raw?function(a){return a}:decodeURIComponent,c=document.cookie.split("; "),e=0,f;f=c[e]&&c[e].split("=");
e++)if(d(f[0])===h)return d(f[1]||"");
return null}})(jQuery);

if ($.cookie('showDiv') == 'newboxes2'){
 newboxes2.show();
}

if ($.cookie('showDiv') == 'newboxes3'){
 newboxes3.show();
}

function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
         $(this).show(200);
         $.cookie('showDiv', thechosenone);
    }
    else {
         $(this).hide(600);
    }
});
}

我陷入困境的地方是使用$（this）在每个循环中设置cookie
然后在刷新页面时调用该cookie
谢谢你的帮助，我真的很感激！
如果你把
这个
放在一个字符串中，它不会被解释为一个标识符，它只会是那四个字符。你需要将元素的id连接到字符串中，这样就可以使用你当前的代码：

/************jQuery Cookie**************/
;(function(g){g.cookie=function(h,b,a){if(1<arguments.length&&(!/Object/.test(Object.prototype.toString.call(b))||null===b||void 0===b)){a=g.extend({},a);
if(null===b||void 0===b)a.expires=-1;
if("number"===typeof a.expires){var d=a.expires,c=a.expires=new Date;
c.setDate(c.getDate()+d)}b=""+b;
return document.cookie=[encodeURIComponent(h),"=",a.raw?b:encodeURIComponent(b),a.expires?";
expires="+a.expires.toUTCString():"",a.path?";
path="+a.path:"",a.domain?";
domain="+a.domain:"",a.secure?";
secure":
""].join("")}for(var a=b||{},d=a.raw?function(a){return a}:decodeURIComponent,c=document.cookie.split("; "),e=0,f;f=c[e]&&c[e].split("=");
e++)if(d(f[0])===h)return d(f[1]||"");
return null}})(jQuery);

if ($.cookie('showDiv') == 'newboxes2'){
 newboxes2.show();
}

if ($.cookie('showDiv') == 'newboxes3'){
 newboxes3.show();
}

function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
         $(this).show(200);
         $.cookie('showDiv', thechosenone);
    }
    else {
         $(this).hide(600);
    }
});
}

$.cookie($(this).attr('id') + '.showDiv', 'visible');

但是，在每个请求中，每个cookie值都会在服务器和浏览器之间来回发送，并且为域允许的cookie空间限制在几千字节以内，因此您应该使cookie尽可能小。请使用单个cookie，并将可见元素的标识放在值中：

/************jQuery Cookie**************/
;(function(g){g.cookie=function(h,b,a){if(1<arguments.length&&(!/Object/.test(Object.prototype.toString.call(b))||null===b||void 0===b)){a=g.extend({},a);
if(null===b||void 0===b)a.expires=-1;
if("number"===typeof a.expires){var d=a.expires,c=a.expires=new Date;
c.setDate(c.getDate()+d)}b=""+b;
return document.cookie=[encodeURIComponent(h),"=",a.raw?b:encodeURIComponent(b),a.expires?";
expires="+a.expires.toUTCString():"",a.path?";
path="+a.path:"",a.domain?";
domain="+a.domain:"",a.secure?";
secure":
""].join("")}for(var a=b||{},d=a.raw?function(a){return a}:decodeURIComponent,c=document.cookie.split("; "),e=0,f;f=c[e]&&c[e].split("=");
e++)if(d(f[0])===h)return d(f[1]||"");
return null}})(jQuery);

if ($.cookie('showDiv') == 'newboxes2'){
 newboxes2.show();
}

if ($.cookie('showDiv') == 'newboxes3'){
 newboxes3.show();
}

function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
         $(this).show(200);
         $.cookie('showDiv', thechosenone);
    }
    else {
         $(this).hide(600);
    }
});
}

$.cookie('showDiv', thechosenone);

然后在显示元素时检查值：

/************jQuery Cookie**************/
;(function(g){g.cookie=function(h,b,a){if(1<arguments.length&&(!/Object/.test(Object.prototype.toString.call(b))||null===b||void 0===b)){a=g.extend({},a);
if(null===b||void 0===b)a.expires=-1;
if("number"===typeof a.expires){var d=a.expires,c=a.expires=new Date;
c.setDate(c.getDate()+d)}b=""+b;
return document.cookie=[encodeURIComponent(h),"=",a.raw?b:encodeURIComponent(b),a.expires?";
expires="+a.expires.toUTCString():"",a.path?";
path="+a.path:"",a.domain?";
domain="+a.domain:"",a.secure?";
secure":
""].join("")}for(var a=b||{},d=a.raw?function(a){return a}:decodeURIComponent,c=document.cookie.split("; "),e=0,f;f=c[e]&&c[e].split("=");
e++)if(d(f[0])===h)return d(f[1]||"");
return null}})(jQuery);

if ($.cookie('showDiv') == 'newboxes2'){
 newboxes2.show();
}

if ($.cookie('showDiv') == 'newboxes3'){
 newboxes3.show();
}

function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
         $(this).show(200);
         $.cookie('showDiv', thechosenone);
    }
    else {
         $(this).hide(600);
    }
});
}

if ($.cookie('showDiv') == 'newboxes2'){
  newboxes2.show();
}

感谢您的帮助！我编辑了上面的代码以包含您的建议，但仍然无法在我的网站上运行。我是否将代码片段放在了正确的位置？@user2680557:（编辑问题时，请添加到问题中，而不是更改原始代码。现在答案很难理解，因为问题似乎已经包含建议的代码。）要使代码正常工作，您需要将刷新后显示元素的代码放入
ready
或
load
事件中。现在代码在元素存在之前运行。好的，谢谢提示。我可以这样做吗？
$（文档）。ready（函数（）{if（$.cookie（'showDiv'）='newboxes2'）{newboxes2.show（）；}如果（$.cookie（'showDiv'）=='newboxes3'）{newboxes3.show（）；}}}
，因为这会破坏javascript切换functionality@user2680557：是的，看起来不错，除了那将是
$（“#newboxes2'）.show（）；
而不是
newboxes2.show（）；
（另一个也一样）。当您显示任何其他OnDe时，您可能还想隐藏第一个
div
。谢谢，我真的非常感谢您的帮助！我尝试过了，但当我进行这些更改时，javascript切换功能仍然被破坏。如果有帮助，我将尝试在这个网站上实现它。这是侧边栏中的登录表单：cropcircleshawaii.com