javascript - jQuery Cookie 没有像它应该的那样在每次点击时设置

Question

我正在尝试制作一个布局切换器。用户单击某个名为 display 的 div，然后将名为 display-grid 的类切换到该类，严格用于视觉效果。

同时，它会为我的布局打开和关闭一些类。

我有一个左栏和一个右栏，目的是让用户选择哪一栏位于页面的哪一侧。就像侧边栏可以位于页面的左侧或右侧一样。

每次他们切换此更改时，它都会从我的其他 2 个 div 中添加或删除类(该类只是添加 float: left; 和 float:right; 并在每次切换单击时交换它们。

现在，在每次切换时，它还会将状态保存到用户 cookie，因此，如果他们更改侧边栏位置，它将在整个网站上持续存在。

我的代码很草率，我不知道 100 美元如何做到这一点，但我做到了，设法让它工作，然后它停止了。好吧，上面描述的一切都有效，除了 cookie 现在给我带来了一个问题，他们不会在每次进行更改时设置 cookie。这很奇怪，因为大约 10 小时前我还可以使用它，所以我不知道发生了什么。

我希望对 Javascript 有更多了解的人可以帮助我让它工作，甚至可能改进它，但现在让它工作会让我很高兴。

下面是我到目前为止的代码。

不包括 jQuery 库，但我已经包括了 cookie 插件。

 $(window).load(function(){
jQuery.cookie=function(name,value,options){if(typeof value!='undefined'){options=options||{};if(value===null){value='';options.expires=-1}var expires='';if(options.expires&&(typeof options.expires=='number'||options.expires.toUTCString)){var date;if(typeof options.expires=='number'){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000))}else{date=options.expires}expires='; expires='+date.toUTCString()}var path=options.path?'; path='+(options.path):'';var domain=options.domain?'; domain='+(options.domain):'';var secure=options.secure?'; secure':'';document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('')}else{var cookieValue=null;if(document.cookie&&document.cookie!=''){var cookies=document.cookie.split(';');for(var i=0;i<cookies.length;i++){var cookie=jQuery.trim(cookies[i]);if(cookie.substring(0,name.length+1)==(name+'=')){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break}}}return cookieValue}};

我的代码

jQuery.noConflict();
jQuery(document).ready(function ($) {
  // Layout Switcher for post list

  // Load existing setting from Cookie
  if ($.cookie('MODE_SWITCHER') == 'null') {
    $('#content-left').attr('class', 'right-sidebar')
    $('#content-right').attr('class', 'left-sidebar')
  } else{
     $('#content-right').attr('class', 'right-sidebar')
     $('#content-left').attr('class', 'left-sidebar')
  }
  // Change LIVE by clicking the Toggle button on the site, save new value to Cookie
  $('.display').click(function () {
        $(this).toggleClass('display-grid');
        $('#content-left').toggleClass('left-sidebar').toggleClass('right-sidebar');
        $('#content-right').toggleClass('right-sidebar').toggleClass('left-sidebar');

        if ($('#content-left').hasClass('left-sidebar')) {
           var postmode = 'leftbody';
        } else {      //var postmode = 'right-sidebar';
          var postmode = '';
        }
        // save preference to Cookie
        $.cookie('MODE_SWITCHER', postmode, {
          path: '/',
          expires: 10000
        });
        return false;
  });
});

HTML

<span class="display" title="Change Layout">List/Grid</span>

<div id="content-left"> Left column content </div>

<div id="content-right"> Right column content </div>

CSS

.display {
    float:left;
    width: 49px;
    height: 20px;
    margin-top: -2px;
    background: url(http://codedevelopr.com/uploads/grid-switcher.gif) no-repeat 0 0;
    text-indent: -5555em;
    overflow: hidden;
    cursor: pointer;
     -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.display-grid {
    background: url(http://codedevelopr.com/uploads/grid-switcher.gif) no-repeat 0 -20px;
}

.grid-content .gridrow {

border-bottom: 1px solid #ECEDE8;

margin: 0 15px;

}

.left-sidebar{
    float:left !important;
    margin-right:15px;
}
.right-sidebar{
    float:right !important;
    margin-right:15px;
}

Answer 1

您的 cookie 代码之前有一个 return 语句，因此永远不会到达 cookie 代码:

    // save preference to Cookie
    return false;
    $.cookie('MODE_SWITCHER', postmode, {
      path: '/',
      expires: 10000
    });
    return false;

删除第一个 return 语句并让您的 cookie 代码得到执行。