jQuery slideToggle 和带有许多框的 cookie答案

【问题标题】：jQuery slideToggle and cookies with many boxesjQuery slideToggle 和带有许多框的 cookie
【发布时间】：2011-07-09 04:02:39
【问题描述】：

我想制作很多没有标识符的盒子，然后点击关闭它们，如下所示：

<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});。

是否可以不输入ID，并检查cookie中的所有ID？我正在寻找更好的解决方案。感谢您的帮助。

【问题讨论】：

盒子的数量和位置会改变吗？如果它们始终相同，您可以获得框 $(this).parent().children().index(this) 的位置，并且永远不会显示具有匹配数字的框。如果他们确实移动了，如果数据来自数据库，您可以使用 ajax 来保存文章或评论的 id 或您正在显示的任何内容，并将其从查询中排除。

标签： javascript jquery html css cookies

【解决方案1】：

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

您可以使用jQuery Cookie 设置cookie。

【讨论】：

谢谢，但我可以设置 cookie，但我无法识别我的盒子：@

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

新答案：

如果不为每个盒子分配唯一的 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();

【讨论】：

eq() 不好，因为万一<boxcontainer><box><box><box></boxcontainer><boxcontainer><box><box><box></boxcontainer> 不起作用。
无赖。如果您的标签值不是很长，那么将标签本身存储在“cookies,milk,pie,asparagus”之类的 cookie 字符串中，然后在页面上通过它们加载 $('.box').each 并比较 $ (this).text() cookie 项的值。
嗯。 $("body .box").each(function(i){console.log(i)} 做得很好，所以我可以通过它们在身体上的索引来识别它们。
好主意，.each() 中的索引值应该保持一致，这样可以解决嵌套问题。同样，假设没有一个框被移出顺序，也没有添加任何新框。
但我对动态内容仍然没有任何想法。就像我在其他盒子的中间附加一个盒子一样：D 我可以处理它们，但是因为索引滑动盒子会弄乱。 :(OPEN-CLOSE-OPEN 将是OPEN-CLOSE(justinserted)-OPEN-OPEN。并且在重新排列带有可排序或可放置的盒子时，它也会搞砸一切。:(

【解决方案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();
});

有效。对此有什么建议吗？我怎样才能使它变得更好？

【讨论】：