Javascript jQuery slideToggle和具有多个框的cookie

我想制作许多没有标识符的框，然后单击关闭它们，如：

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

从任务的角度来看，隐藏的方法并不那么重要。

文本

和类似的

$this.next（）.slideToggle（）

对我也有好处

问题是，我如何为切换的元素添加cookie，以便在页面刷新时保持它们的关闭状态。
像

$（“.tabs:not（.forget）”）.tabs（{cookie:{expires:1}，可折叠：true}）

是否可以在不输入ID的情况下检查Cookie中的所有ID？
我正在寻找更好的解决办法。谢谢你的帮助

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

您可以使用设置cookie

您可以使用设置cookie。
新答案：

我真的认为，如果不为每个盒子分配唯一的ID，就无法解决这个难题。从理论的角度（我要说的是一个肢体，也是一个实际的角度），您试图实现的目标完全符合分配唯一ID的概念。你想对个别的、独特的元素采取个别的、独特的行动。试图在没有单独的、唯一的ID的情况下实现这一点是与基本理论本身相抵触的

也就是说，我很理解在服务器端生成唯一的ID可能是一件麻烦事，您最好不要这样做。但我认为对你的问题最好的回答是做你希望不必做的事…：-）

旧答案：

如果框在DOM中始终具有相同的顺序，则可以将框的索引号附加到字符串中，然后将其存储在cookie中。像“2,3,10,13”一样，在页面加载时，读取cookie cookieVal.split（“，”），然后通过值进行for循环，并使用jQuery:eq（）选择器(http://api.jquery.com/eq-selector/)做某事

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

新答案：

我真的认为，如果不为每个盒子分配唯一的ID，就无法解决这个难题。从理论的角度（我要说的是一个肢体，也是一个实际的角度），您试图实现的目标完全符合分配唯一ID的概念。你想对个别的、独特的元素采取个别的、独特的行动。试图在没有单独的、唯一的ID的情况下实现这一点是与基本理论本身相抵触的

也就是说，我很理解在服务器端生成唯一的ID可能是一件麻烦事，您最好不要这样做。但我认为对你的问题最好的回答是做你希望不必做的事…：-）

旧答案：

如果框在DOM中始终具有相同的顺序，则可以将框的索引号附加到字符串中，然后将其存储在cookie中。像“2,3,10,13”一样，在页面加载时，读取cookie cookieVal.split（“，”），然后通过值进行for循环，并使用jQuery:eq（）选择器(http://api.jquery.com/eq-selector/)做某事

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

您需要某种方法来引用cookie中的框。它可以是一个ID、类，或者如果框的数量固定，并且顺序不变，那么它可以是一个数字。为了安全起见，我会使用一个ID（或其他一些唯一的属性），因为不管出于什么原因，框的顺序发生了变化，那么cookie中的数字顺序都不会匹配

var closedBoxesCookie=document.cookie;
$(document).ready(function() { 
    $(closedBoxesCookie.split(',')).each(function() {
        $('#' + this).hide();
    });
});

您需要某种方法来引用cookie中的框。它可以是一个ID、类，或者如果框的数量固定，并且顺序不变，那么它可以是一个数字。为了安全起见，我会使用一个ID（或其他一些唯一的属性），因为不管出于什么原因，框的顺序发生了变化，那么cookie中的数字顺序都不会匹配

var closedBoxesCookie=document.cookie;
$(document).ready(function() { 
    $(closedBoxesCookie.split(',')).each(function() {
        $('#' + this).hide();
    });
});

嗯，我想我做到了-

就

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

工作。有什么建议吗？我怎样才能把它做得更好呢？
嗯，我想我做到了--

就

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

工作。有什么建议吗？我怎样才能做得更好？
盒子的数量和位置是否会改变？如果它们总是相同的，则可以获取框的位置
$（this）.parent（）.children（）.index（this）
，并且从不显示具有匹配数字的框。如果它们确实在移动，如果数据来自数据库，您可以使用ajax保存文章或评论的id或显示的任何内容，并将其从查询中排除。框的数量和位置是否会发生变化？如果它们总是相同的，则可以获取框的位置
$（this）.parent（）.children（）.index（this）
，并且从不显示具有匹配数字的框。如果它们确实在移动，如果数据来自数据库，您可以使用ajax保存文章或评论的id或显示的任何内容，并将其从查询中排除。eq（）不好，因为万一
不起作用。Bummer。如果您的标记值不是很长，那么如何将标记本身存储在cookie字符串中，如“cookies，milk，pie，asparagus”，然后在页面上加载$（'.box'）。通过每个标记，将$（this）.text（）值与cookie items.Hm进行比较<代码>$（“body.box”）.each（函数（i）{console.log（i）}

做得很好，所以我可以通过它们在body上的索引来识别它们。好主意，.each（）中的索引值应该保持一致，这将处理嵌套问题。同样，假设没有一个盒子被移动出它们的顺序，并且没有新的盒子被追加。但是我仍然没有任何关于动态内容的想法。比如，如果我在另一个盒子的中间加上一个盒子：D我可以处理它们，但是因为索引滑动了盒子。我被搞砸了。（

OPEN-CLOSE-OPEN

将是

OPEN-CLOSE（justinserted）-OPEN-OPEN

。在重新排列带有可排序或可拖放的框时，它也会把一切搞砸。：（eq（）不好，因为万一

不起作用。糟糕。如果您的标记值不是很长，那么如何将标记本身存储在cookie字符串中，如“cookies，milk，