Использование jQuery cookie.js для запоминания скрытия / показа элемента? - PullRequest
Новая
       19

Использование jQuery cookie.js для запоминания скрытия / показа элемента?

5 голосов
/ 14 сентября 2010

Я нашел отличный учебник о том, как показать и скрыть определенный div на странице. Я получил код работает нормально, но я хотел бы расширить это, чтобы показать / скрыть запоминается при загрузке страницы. Я искал решение, 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>

Любая идея, как я могу добавить куки, чтобы запомнить выбор от пользователя? Пример кода был бы великолепен, так как я все еще пытаюсь понять jQuery / Javascript в целом:)

Заранее спасибо:)

1 Ответ

8 голосов
/ 14 сентября 2010

Должно быть довольно легко. Когда вы показываете 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']();

:)

...