jQuery 쿠키가 각 클릭에 설정되어 있지 않아야합니다.

Question

레이아웃 전환기를 만들려고합니다. 사용자는 display이라는 특정 div를 클릭 한 다음 display-grid 클래스를 엄격하게 시각적으로 해당 클래스로 토글합니다.

동시에 내 레이아웃에 대해 일부 클래스를 설정 및 해제합니다.

왼쪽 열과 오른쪽 열이 있는데, 개체는 사용자가 페이지의 어느쪽에있는 열을 선택할 수있게하는 것입니다. 사이드 바처럼 페이지의 왼쪽이나 오른쪽에있을 수 있습니다.

그들이 추가하거나 (클래스는 단지 추가되는 float: left; 및 float:right; 각 토글 클릭에 그들을 스왑. 그것은 토글 각 이제

내이 다른 div의에서 클래스를 제거하거나이 변경을 전환 할 때마다 또한 상태를 사용자 쿠키에 저장하므로 사이드 바 위치를 변경하면 사이트 전체에서 계속 유지됩니다.

내 코드가 엉망입니다. 잘 모르겠지만 어떻게해야합니까? 이제는 쿠키가 나에게 이슈가되고있는 것 외에는 변경이있을 때마다 쿠키를 설정하지 않는다는 점을 제외하고는 위의 모든 작업이 효과가 있습니다. 이상하게 보입니다. 약 10 시간 전에 나는 일을했기 때문에 무슨 일이 일어 났는지 알 수 없었다.

Javascript에 대한 지식이있는 사람이이 작업을 수행하거나 개선하기 위해 도움이 될 수 있기를 기대하지만 지금은 제대로 작동하도록하면 내 하루가됩니다.

아래 코드는 제가 지금까지 가지고있는 코드입니다.

jQuery 라이브러리에는 포함되어 있지 않지만 쿠키 플러그인이 포함되어 있습니다.

$(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 쿠키 코드가 도달하지 않을 것이다, 그래서 당신이 바로 쿠키 코드 앞에 return 문을

.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

:

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

첫 번째 return 문을 제거하고 쿠키 코드가 실행되도록하십시오.

Answer 2

쿠키를 설정하기 전에 Yoh는 return false;입니다. 그것을 제거하는 것이 효과가있다.