Question

我有一个包含多个div的页面，并且在每个div中我都有一个带有.sendCommentForm类的表单。

由于PHP循环，页面中会打印多个div，这就是为什么我在同一页面中有多个表单的原因。

我不想直接显示表单，用户会单击一个按钮，然后表单将通过jQuery slideToggle。

我需要在页面刷新时将表单保持为slidToggled（表单应该是slideDown，如果它在页面刷新之前向下滑动）

我通过jQuery搜索并找到了cookie。并且它工作正常，但问题是所有具有相同类名的表单都获得了slideDown，并且我只想要一个在页面刷新之前处于slideDown状态的表单（或特定表单）。

这个主题帮助我达到了我所处的位置： jQuery - slideToggle keep open until closed

我的代码（HTML）：

<div class="options text-center"></a>
    <button class="btn btn-info sendComment">
        Comment
        <i class="glyphicon glyphicon-arrow-down"></i>
    </button>
</div>
<div class="sendCommentForm">
    <form action="mypage" method="POST">
        <input type="text" name="subject" placeholder="subject" class="form-control">
        <button type="submit"></button>
    </form>
</div>

jQuery的： -

// Open / Close Panel According to Cookie //    
if($.cookie('comForm') == 'open') {
    $('.sendCommentForm').slideDown('fast');
} else {
    $('.sendCommentForm').slideUp('fast');
}

// Toggle Panel and Set Cookie //
$('.sendComment').click(function() {
    var theForm = $(this).parent().next('.sendCommentForm');
    theForm.slideToggle('fast', function() {
        if($(this).is(':hidden')) {
            $.cookie('comForm', 'closed');
        } else {
            $.cookie('comForm', 'open');
        }
    });
});

我可以将元素：$（'。sendCommentForm'）更改为$（this），以便它可以识别处于slideDown状态的相同表单... 我试过了，它不起作用!!

我对这个问题很头疼，我很困惑。

感谢您的帮助..

Answer 1

你需要一个诸如ID或数据属性之类的unquie标识符，并且可能在id的cookie中存储一个以逗号分隔的列表。

使用浏览器会话是优先的，因为cookie会在设置cookie的域上的每个请求中发送到服务器。根据您的受众，请检查浏览器对浏览器会话或本地存储的支持，看看这是否是您可以使用的。

Answer 2

您需要为每个表单提供不同的ID。在cookie中，保存其键为ID的对象，值为打开/关闭状态。

$('.sendComment').click(function() {
    var theForm = $(this).parent().next('.sendCommentForm');
    theForm.slideToggle('fast', function() {
    var state = {};
    $('.sendCommentForm').each(function() {
      state[this.id] = $(this).is(':visible');
    });
    $.cookie('comForm', state);
  });
});

然后当页面加载时，获取cookie并根据对象的值显示每个表单。

var comformState = $.cookie('comForm');
if (comformState) {
    $.each(comformState, function(id, visible) {
        $('#' + id).parent().next('.sendCommentForm')[visible ? 'slideDown' : 'slideUp']('fast');
    });
}

如何通过jQuery为某个元素设置cookie

2 个答案: