【问题标题】:Use jquery cookie to remember which div is toggled on page refresh使用 jquery cookie 记住在页面刷新时切换了哪个 div
【发布时间】:2013-08-19 03:30:38
【问题描述】:

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

我尝试了很多解决方案,几乎都弄明白了,但是在设置和检索 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);
    }
});
}

如果 cookie 代码的格式不正确,这里有一个工作示例:http://jsfiddle.net/CQFJ4/ 但那个小提琴不能满足我的需要,我只是借用了 cookie 代码。

我遇到困难的地方是使用 $(this) 在每个循环中设置 cookie 然后在页面刷新时调用该 cookie 感谢您的帮助,我真的很感激!

【问题讨论】:

    标签: jquery cookies toggle


    【解决方案1】:

    如果你把this 放在一个字符串中,它不会被解释为一个标识符,它只是这四个字符。您需要将元素中的 id 连接到字符串中,因此这将适用于您当前的代码:

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

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

    $.cookie('showDiv', thechosenone);
    

    然后你在显示元素时检查值:

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

    【讨论】:

    • 感谢您的帮助!我编辑了上面的代码以包含您的建议,但仍然无法在我的网站上运行。我把代码 sn-ps 放在正确的地方了吗?
    • @user2680557:(编辑问题时,添加问题而不是更改原始代码。现在答案很难理解,因为问题似乎已经包含建议的代码。)使代码工作,您需要将刷新后显示元素的代码放在readyload 事件中。现在代码在元素存在之前运行。
    • 好的,谢谢你的提示。我会这样做吗? $(document).ready(function(){ if ($.cookie('showDiv') == 'newboxes2'){ newboxes2.show(); } if ($.cookie('showDiv') == 'newboxes3'){ newboxes3.show(); } } 因为这会破坏 javascript 切换功能
    • @user2680557:是的,看起来是对的,只不过是$('#newboxes2').show(); 而不是newboxes2.show();(另一个也一样)。当您显示任何其他 ondes 时,您可能还想隐藏第一个 div
    • 谢谢,非常感谢您的帮助!我试过了,当我进行这些更改时,javascript 切换功能仍然被破坏。如果有帮助,这是我正在尝试实施的网站。这是侧边栏中的登录表单:cropcircleshawaii.com
    猜你喜欢
    • 2013-05-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-10-28
    • 1970-01-01
    • 2011-11-15
    • 2013-03-01
    • 1970-01-01
    相关资源
    最近更新 更多