Скрыть и показать содержимое на основе значения Cookie

Question

Вот мой Jquery:

$("#tool").click(function() { 
    $(".chelp").slideToggle(); 
    $("wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { 
    $("#tool img").toggle(); 
    }); 
    }); 

При нажатии #tool img#wrapper скрыта вместе с .chelp.

Мне нужно управлять этим с помощью печенья, поэтому, когда пользователь скрывает #wrapper, он остается скрытым на всех страницах или при повторном посещении страницы.

Я знаю, что есть плагин jQuery Cookie, но я хотел бы сделать это с помощью простого Javascript, а затем с другим плагином.

Может ли кто-нибудь сказать мне, как я могу построить в нем простой javascript и объединиться с JQuery для создания файла cookie, а затем проверять файл cookie каждый раз, когда страница загружается, чтобы увидеть, должен ли #wrapper скрываться или отображаться?

Answer 1

Cookie extension достаточно лёгкий, что вам не нужно создавать новый файл - просто вставьте его в свой основной файл javascript. Я сделал это, и все работает отлично.

Чтобы использовать простой javascript и реинтегрировать его с помощью jQuery, по существу, использовать плагин в любом случае. (Взглянув на короткий необработанный код Cookie является хорошим способом, чтобы увидеть, как написать свой собственный плагин, на самом деле.)

Update

Вот некоторые основные JQuery вы можете использовать, чтобы проверить и установить печенье.

if ($.cookie("hide-alert") == "true") { 
     $("#legal-alert").hide(); 
    } 
    $("#legal-alert").append("<div class='close-alert' title='Close'>x</div>"); 
    $(".close-alert").live("click", function() { 
     $(this).parent(".alert").slideUp(); 
     $.cookie("hide-alert", "true", { expires: 365 }); 
    }); 

Вся документация вам нужно, это в самом плагине (который я удалил, чтобы сделать его достаточно мал, чтобы поместить в мой файл JS непосредственно). Очевидно, вы можете изменить «expires» и т. Д. Обратите внимание, что приведенный выше код устанавливает кнопку, чтобы закрыть/скрыть поле, а затем установить живой прослушиватель для onClick, который скрывает окно, которое вы хотите скрыть (я назвал его «# legal-alert» выше).

Answer 2

Если вы хотите, чтобы написать простые JS, чтобы сделать это, вы можете попробовать:

function setCookie(c_name,value,expiredays) 
{ 
    var exdate=new Date(); 
    exdate.setDate(exdate.getDate()+expiredays); 
    document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toUTCString()); 
} 
function getCookie(c_name) 
{ 
if (document.cookie.length>0) 
    { 
    c_start=document.cookie.indexOf(c_name + "="); 
    if (c_start!=-1) 
    { 
    c_start=c_start + c_name.length+1; 
    c_end=document.cookie.indexOf(";",c_start); 
    if (c_end==-1) c_end=document.cookie.length; 
    return unescape(document.cookie.substring(c_start,c_end)); 
    } 
    } 
return ""; 
} 
var default_state = getCookie("state"); 
if(default_state == "hidden") { 
    $("#wrapper").hide(); 
} 
$("#tool").click(function() { 
    $(".chelp").slideToggle(); 
    $("wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { 
    $("#tool img").toggle(); 
    setCookie('state','hidden',365); 
    }); 
}); 

Answer 3

Вы можете установить кук в JavaScript с document.cookie W3C rundown here. Если вы возьмете функции из этого учебника, я думаю, что-то вроде этого вы хотите:

$("#tool").click(function() { 
    $(".chelp").slideToggle(); 
    if(!getCookie("shownWrapper")) { 
     setCookie("shownWrapper", "true", null); 
     $("wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { 
      $("#tool img").toggle(); 
     }); 
    } 
}); 

Удачи!