JQuery Toggle Cookie

Question

У меня есть следующий код (Да, я знаю, что он довольно длинный, но я хочу сохранить его как можно больше)

Надеюсь, это будет иметь смысл, но, по сути, я хочу сделать этокогда пользователь щелкает один из переключателей, он создает соответствующий файл cookie и устанавливает для него значение «Открыть», а затем, когда он снова щелкает по нему, он удаляет файл cookie.И наоборот, в зависимости от того, была ли панель открыта или нет.Поэтому я пытаюсь заставить куки быть созданы и удалены вовремя с помощью переключателя.

Как мне это сделать?Спасибо.

$("div#FilterType div.PanelContent ul").hide();
$("div#FilterLevel div.PanelContent ul").hide();
$("div#FilterAge div.PanelContent ul").hide();
$("div#FilterCategory div.PanelContent ul").hide();

$("div#FilterArea div.PanelContent ul").show();
$("div#FilterArea div.PanelContent p").hide();
$("div#FilterArea div.PanelContent div.MapPanel").show();
$("div#FilterArea div.PanelHead h2 span").addClass("selected");

$("div.Filter div.PanelHead h2").attr('title', 'Toggle Panel');

$("div#FilterType div.PanelHead").click(function (e) {
    $("div#FilterType div.PanelContent ul").slideToggle('fast');
    $("div#FilterType div.PanelContent p").slideToggle('fast');
    $("div#FilterType div.PanelHead h2 span").toggleClass("selected");
    $.cookie('FilterType',
            $("div#FilterType div.PanelContent ul").is(":hidden") ? 'Collapsed' : 'Open');
});
$("div#FilterLevel div.PanelHead").click(function (e) {
    $("div#FilterLevel div.PanelContent ul").slideToggle('fast');
    $("div#FilterLevel div.PanelContent p").slideToggle('fast');
    $("div#FilterLevel div.PanelHead h2 span").toggleClass("selected");
    $.cookie('FilterLevel',
            $("div#FilterLevel div.PanelContent ul").is(":hidden") ? 'Collapsed' : 'Open');

});
$("div#FilterAge div.PanelHead").click(function (e) {
    $("div#FilterAge div.PanelContent ul").slideToggle('fast');
    $("div#FilterAge div.PanelContent p").slideToggle('fast');
    $("div#FilterAge div.PanelHead h2 span").toggleClass("selected");
    $.cookie('FilterAge',
            $("div#FilterAge div.PanelContent ul").is(":hidden") ? 'Collapsed' : 'Open');
});
$("div#FilterArea div.PanelHead").click(function (e) {
    $("div#FilterArea div.PanelContent ul").slideToggle('fast');
    $("div#FilterArea div.PanelContent p").slideToggle('fast');
    $("div#FilterArea div.PanelContent div.MapPanel").slideToggle('fast');
    $("div#FilterArea div.PanelHead h2 span").toggleClass("selected");
    $.cookie('FilterArea',
            $("div#FilterArea div.PanelContent ul, div#FilterArea div.PanelContent div.MapPanel").is(":hidden") ? 'Collapsed' : 'Open');
});
$("div#FilterCategory div.PanelHead").click(function (e) {
    $("div#FilterCategory div.PanelContent ul").slideToggle('fast');
    $("div#FilterCategory div.PanelContent p").slideToggle('fast');
    $("div#FilterCategory div.PanelHead h2 span").toggleClass("selected");
    $.cookie('FilterCategory',
            $("div#FilterCategory div.PanelContent ul").is(":hidden") ? 'Collapsed' : 'Open');
});


// Checks the values of the cookies (if they exist) to open or close the panels

var FilterType = $.cookie('FilterType');
var FilterLevel = $.cookie('FilterLevel');
var FilterAge = $.cookie('FilterAge');
var FilterArea = $.cookie('FilterArea');
var FilterCategory = $.cookie('FilterCategory');

if (FilterType == 'Open')
{
    $("div#FilterType div.PanelContent ul").show();
    $("div#FilterType div.PanelContent p").hide();
    $("div#FilterType div.PanelHead h2 span").addClass("selected");
}
else
{
    $("div#FilterType div.PanelContent ul").hide();
    $("div#FilterType div.PanelContent p").show();
    $("div#FilterType div.PanelHead h2 span").removeClass("selected");
}

if (FilterLevel == 'Open')
{
    $("div#FilterLevel div.PanelContent ul").show();
    $("div#FilterLevel div.PanelContent p").hide();
    $("div#FilterLevel div.PanelHead h2 span").addClass("selected");
}
else
{
    $("div#FilterLevel div.PanelContent ul").hide();
    $("div#FilterLevel div.PanelContent p").show();
    $("div#FilterLevel div.PanelHead h2 span").removeClass("selected");
}

if (FilterAge == 'Open')
{
    $("div#FilterAge div.PanelContent ul").show();
    $("div#FilterAge div.PanelContent p").hide();
    $("div#FilterAge div.PanelHead h2 span").addClass("selected");
}
else
{
    $("div#FilterAge div.PanelContent ul").hide();
    $("div#FilterAge div.PanelContent p").show();
    $("div#FilterAge div.PanelHead h2 span").removeClass("selected");
}

if (FilterArea == 'Open')
{
    $("div#FilterArea div.PanelContent ul").show();
    $("div#FilterArea div.PanelContent p").hide();
    $("div#FilterArea div.PanelContent div.MapPanel").show();
    $("div#FilterArea div.PanelHead h2 span").addClass("selected");
}
else
{
    $("div#FilterArea div.PanelContent ul").hide();
    $("div#FilterArea div.PanelContent p").show();
    $("div#FilterArea div.PanelContent div.MapPanel").hide();
    $("div#FilterArea div.PanelHead h2 span").removeClass("selected");
}

if (FilterCategory == 'Open')
{
    $("div#FilterCategory div.PanelContent ul").show();
    $("div#FilterCategory div.PanelContent p").hide();
    $("div#FilterCategory div.PanelHead h2 span").addClass("selected");
}
else
{
    $("div#FilterCategory div.PanelContent ul").hide();
    $("div#FilterCategory div.PanelContent p").show();
    $("div#FilterCategory div.PanelHead h2 span").removeClass("selected");
}

РЕДАКТИРОВАТЬ: Я пытался использовать что-то вроде этого:

$.cookie('FilterType', 
                $("div#FilterType").is(":hidden") ? null : 'Open');

ИЛИ

$.cookie('FilterType',
                $("div#FilterType").is(":hidden") ? 'Collapsed' : 'Open');

Было бы что-тонравится эта работа?и будет ли работать ноль или это должно быть значение, как во втором примере?После тестирования он позволяет создать файл cookie со значением «Open», но когда пользователь снова щелкает его, он не меняет значение на «Collapsed».

Это из-за .is(":hidden")часть

Answer 1

Если вы используете плагин jQuery cookie , ваш код должен работать как положено.

$.cookie('name', null);

эффективно «удаляет» элемент cookie. Вы также должны указать соответствующее время истечения срока действия, чтобы значения cookie сохранялись в течение сеансов браузера. например,

$.cookie('the_cookie', 'the_value', { expires: 365 });

Совет: вы можете использовать .toggle (showOrHide) и .toggleClass (className, switch) для упрощения кода.