使用jQuery cookie.js来记住hide / show元素?

时间:2010-09-13 21:09:23

标签: jquery cookies hide show

我找到了一个关于如何在页面上显示和隐藏某个div的精彩教程。我得到的代码工作正常,但我想扩展是在页面加载时记住show / hide。我已经找到了解决方案jQuery cookie就是答案..如果我知道如何编写实际的代码那么......这是当前的代码片段:

<script type="text/javascript">
jQuery(document).ready(function() {
 // hides the group_desciption as soon as the DOM is ready
 // (a little sooner than page load)
  jQuery('#group_desciption').hide();
 // shows the group_desciption on clicking the noted link
  jQuery('a#slick-show').click(function() {
 jQuery('#group_desciption').show('slow');
 return false;
  });
 // hides the group_desciption on clicking the noted link
  jQuery('a#slick-hide').click(function() {
 jQuery('#group_desciption').hide('fast');
 return false;
  });
 // toggles the group_desciption on clicking the noted link
  jQuery('a#slick-toggle').click(function() {
 jQuery('#group_desciption').toggle(400);
 return false;
  });
});</script>

知道如何添加Cookie以记住用户的选择吗?代码示例会很棒,因为我仍然试图掌握jQuery / Javascript:)

提前致谢:)

1 个答案:

答案 0 :(得分:8)

应该很容易。当你显示div添加一些代码,如:

jQuery.cookie('show_desc', 'yep');

...当你隐藏div时:

jQuery.cookie('show_desc', 'nope');

...然后在你的代码顶部:

jQuery('#group_desciption').hide();

...将其更改为:

var shouldShow = jQuery.cookie('show_desc') == 'yep';
if( shouldShow ) { jQuery('#group_desciption').show(); }
else {             jQuery('#group_desciption').hide(); }

或者,或者:

jQuery('#group_desciption')[jQuery.cookie('show_desc') == 'yep' ? 'show' : 'hide']();

:)