我想问问题。我有两个div 类井,每个都有相同的 html 元素(实际上我的项目中有很多井类)。每个井div 都具有显示和隐藏的功能。我的问题是我想使用 jquery 和 jquery cookie 只保存每个井div.Im 的隐藏/显示状态。我设法完成了它,但所有良好的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
好的,所以你想单独保存每个div的状态,这是合乎逻辑的。我可以向你推荐两种方式:
1) 为每个div.well 分配一个唯一的 ID
<div class='well ...' id='wellState_0'>
...
<div class='well ...' id='wellState_1'>
...
然后你把这些ID保存在饼干中:
$.cookie($(this).parents('.well').attr('id'), 'show')
2)你通过divs的编号自动生成id:
$.cookie(
'wellState_' +
$('.well').index($(this).parents('.well')[0]),
'show'
)
感谢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');
}
});
});