jQuery slideToggle и куки со множеством ящиков

Question

Я хотел бы сделать много ящиков без идентификатора, и при щелчке закрыть их как:

<div class="box">
    <header>I'm the box header<ins></ins></header>
    <h1>Title here</h1>
    <p>I'm a paragraph.</p>
</div>

С помощью этого скрипта

$(".box header").click(function(){
    $(this).nextAll().slideToggle();
});

С точки зрения задачи способ сокрытия не так важен. <box><header></header><content>text</content></box> и как $this.next().slideToggle() тоже хорошо для меня.

Вопрос в том, как добавить cookie для переключаемых элементов, чтобы они оставались закрытыми при обновлении страницы.
Как и $(".tabs:not(.forget)").tabs({cookie: {expires: 1}, collapsible: true});.

Возможно ли это, не вводя идентификатор и проверяя все идентификаторы в файлах cookie? Я ищу лучшее решение для этого. Спасибо за помощь.

Answer 1

Новый ответ:

Я действительно не думаю, что вы можете решить эту проблему, не назначив уникальные идентификаторы для каждой из ваших коробок. С теоретической точки зрения (я выйду на передний план и скажу также практическую точку зрения), то, что вы пытаетесь достичь, идеально соответствует концепции назначения уникальных идентификаторов. Вы хотите, чтобы индивидуальные, уникальные действия на отдельных, уникальных элементов. Пытаясь добиться этого, не имея индивидуальных, уникальных идентификаторов, мы сражаемся против самой фундаментальной теории.

Тем не менее, я ценю, что генерация уникальных идентификаторов на стороне сервера - это, вероятно, хлопот, без которого вы бы предпочли обойтись. Но я думаю, что лучший ответ на ваш вопрос - делать именно то, что вы надеялись не делать ...: -)

Старый ответ:

Если ящики всегда будут иметь одинаковый порядок в DOM, вы можете добавить индексный номер ящика в строку, которая затем сохраняется в вашем файле cookie. Как и «2,3,10,13», то при загрузке страницы вы читаете cookie, cookieVal.split (","), затем for просматриваете значения и используете селектор jQuery: eq () (http://api.jquery.com/eq-selector/), чтобы что-то сделать как

$(".box:eq(" + i + ")").hide();

Answer 2

Вам нужен какой-то способ сослаться на коробки в куки.Это может быть идентификатор, класс или, если количество ящиков фиксировано, а порядок не изменяется, это может быть число.Я бы использовал ID (или какой-то другой уникальный атрибут), чтобы быть в безопасности, потому что, скажем, по какой-то причине меняется порядок ящиков, тогда числовой порядок в куки не совпадает.

Answer 3

$(".box header").click(function(){
    $(.box).slideToggle();
    // Set the cookie here
    var boxState = ($(.box).css('display')=='block')? 1: 0;
    $.cookie("boxState", state);
});

Вы можете использовать jQuery Cookie , чтобы установить cookie.

Answer 4

Ну, я думаю, что сделал это -.-

В случае

<div class="box">
    <header>Box Header <ins></ins></header>
    <figure>
        <h1>Header 1</h1>
        <h2>Header 2</h2>
        <p>Paragraph.</p>
    </figure>
</div>

С JS:

$("body .box figure").each(function(i){
    var o = $.cookie('boxopened'+i);
    if (!o) 
    {
        $(this).show();
    }
    else 
    {
        $(this).hide();
    }
});
$("body .box header").click(function(){
    var i = $(this).next().index("body .box figure");
    var o = $.cookie('boxopened'+i);
    if (!o)
    {
        $.cookie('boxopened'+i, 'true'); 
    }
    else 
    { 
        $.cookie('boxopened'+i, ''); 
    }
    $(this).next().slideToggle();
});

Работает.Есть предложения по этому поводу?Как я могу сделать это лучше?