0

我想问问题。我有这两个 div 类，每个类都有相同的 html 元素（实际上我的项目中有很多井类）。每个井 div 都有显示和隐藏的功能。我的问题是我只想为每个井 div 保存隐藏/显示状态。我使用 jquery 和 jquery cookie。我设法完成了它，但所有 div 都受到 jquery cookie 的影响。我知道这是错误的，我不知道如何正确编写 jquery cookie 以仅保存每个 div 的状态。这就是我出来的。

<div class="well dark_turq">
    <div class="well-header">
        <h5>Charts and Statistics</h5>
        <ul>
            <li class="collapse_well">
                <a href="#" rel="tooltip" title="Minimize">
                    <i class="icon-minus"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="well-content">
        <div class="tab-content">
            Content 1
        </div>
    </div>
</div>
<div class="well green">
    <div class="well-header">
        <h5>Charts and Statistics</h5>
        <ul>
            <li class="collapse_well">
                <a href="#" rel="tooltip" title="Minimize">
                    <i class="icon-minus"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="well-content">
        <div class="tab-content">
            Content 2
        </div>
    </div>
</div>

底部是我的 jquery 代码。我已经包含了 jquery cookie。

var showing = $.cookie('wellState') == 'show';

if(showing){

    $('.well-content').show();
}
else{
    $('.well-content').hide();
}

$('li.collapse_well a').click(function() {
    var container = $(this).parents('.well').find('.well-content');
    if(container.is(":hidden")) {
      container.slideDown(200);
      $.cookie('wellState', 'show');
      $(this).find('i').removeClass('icon-plus').addClass('icon-minus');
      $(this).attr('title','Minimize');
    } else {
      container.slideUp(200);
      $.cookie('wellState','hide');
      $(this).find('i').removeClass('icon-minus').addClass('icon-plus');
      $(this).attr('title','Maximize');
        }
        return false;
  });

我希望有人可以为此线程提供一些帮助或建议。这是该示例的 jsfiddle

4

2 回答 2

0

谢谢Sayonji的建议。。

重要提示：我需要为所有井班提供 ID。现在我设法通过使用每个函数来为每个 div 井类做最小化 cookie..在它里面我调用点击事件函数..下面是我在 jquery 上的解决方案..

$(document).ready(function(){
    $('li.collapse_well a').each(function(){

        $(this).click(function() {

        var container = $(this).parents('.well').find('.well-content');

        //minimize and maximize well content and declare the cookies inside here
        if(container.is(":hidden")) {
          container.slideDown(200);
          $.cookie($(this).parents('.well').attr('id'), 'show');
          $(this).find('i').removeClass('icon-plus').addClass('icon-minus');
          $(this).attr('title','Minimize');
        } else {
          container.slideUp(200);
          $.cookie($(this).parents('.well').attr('id'), 'hide');
          $(this).find('i').removeClass('icon-minus').addClass('icon-plus');
          $(this).attr('title','Maximize');
            }
            return false;

        });
        //show everything when page loaded
        $(this).parents('.well').children('.well-content').show();

       //pass the saved cookies to variable
        var state = $.cookie($(this).parents('.well').attr('id'));

       //show the well content based on cookies condition 
        if(state == 'show' || state == null){
            $(this).parents('.well').children('.well-content').show();
        }
        else{
            $(this).parents('.well').children('.well-content').hide();
             $(this).find('i').removeClass('icon-minus').addClass('icon-plus');
             $(this).attr('title','Maximize');

        }

    });
  });
于 2013-10-01T03:09:10.697 回答
0

好的，所以你想分别保存每个 div 的状态，这是合乎逻辑的。我可以建议你两种方法：

1）您为每个 div.well 分配一个唯一的 id

<div class='well ...' id='wellState_0'>
...
<div class='well ...' id='wellState_1'>
...

然后将这些 id 保存在 cookie 中：

$.cookie($(this).parents('.well').attr('id'), 'show')

2）您通过 div 的编号使用 javascript 自动生成 id：

$.cookie(
    'wellState_' +
    $('.well').index($(this).parents('.well')[0]),
    'show'
)
于 2013-09-23T08:51:33.810 回答