왜 $ .removeCookie()가 작동하지 않습니까?

Question

jqueryCookie를 사용하여 낮/밤 모드로 하나의 버튼을 만들려고합니다. 나는이 코드가 무엇이 잘못되었는지 확신하지 못한다. 첫 번째 "if"문이 작동하고 쿠키를 추가하지만 일단 페이지를 새로 고치면 본문은 쿠키가 남아있는 동안 더 이상 graybg 클래스를 제거합니다.

$(document).ready(function() { 
    var btn = $('#modeSwitch'), 
    body = $('body'), 
    cookieVal = $.cookie("switchLight"); 

    btn.click(function(e) { 
     if (cookieVal != "2") { 
      $.cookie("switchLight", "2", { path: '/' }); 
      body.addClass('graybg'); 
      btn.text('Day'); 
     }else if (cookieVal == "2") { 
      btn.text('Day'); 
      body.addClass('graybg'); 
      $.removeCookie("switchLight", { path: '/' }); 
      $(this).text('Night'); 
     }; 
    }); 
}); 

Answer 1

두 개의 클릭 핸들러가 아니라 하나의 클릭 핸들러 만이 버튼에 연결되어 있어야합니다. 현재는 두 클릭 핸들러가 모두 호출됩니다. 당신이 버튼 클릭 이벤트에 대한 응답을 제외하고 그 클래스를 할당하지 때문에

btn.click(function(e) { 
    if (cookieVal != "2") { 
     $.cookie("switchLight", "2", { path: '/' }); 
     body.addClass('graybg'); 
     $(this).text('Day'); 
    } else if (cookieVal == "2") { 
     body.addClass('graybg') 
     $.removeCookie("switchLight", { path: '/' }); 
     $(this).text('Night'); 
    }; 
}); 

페이지 새로 고침에 적용되는하지 graybg 클래스에 대한 우려를 해결하기 위해, 즉, 그래서 당신은 아마를 적용하려면이 같은 뭔가가 필요 페이지로드시 스타일.

cookieVal = $.cookie("switchLight"); 
if(cookieVal === '2') { 
    btn.addClass('graybg'); 
} 

Answer 2

이 같은 것을 사용할 수 있습니다 :

$(function(){ 
var btn = $('#modeSwitch'); 
var body = $('body'); 
var cookieVal = $.cookie("switchLight"); 
    if (cookieVal == "1") { 
     body.addClass('graybg'); 
     btn.val('Night'); 
    }else{ 
     body.removeClass('graybg'); 
     btn.val('Day'); 
    } 
    btn.on('click',function() { 
     var cookieVal = $.cookie("switchLight"); 
     if (cookieVal == "1") { 
      $.cookie("switchLight", "0", { path: '/' }); 
      body.removeClass('graybg'); 
      $(this).val('Day'); 
     }else{ 
      $.cookie("switchLight", "1", { path: '/' }); 
      $(this).val('Night'); 
      body.addClass('graybg'); 
     } 
    }); 
});