Вопрос по click, jquery, save, cookies – Jquery - сохранить состояние класса для нескольких div # в cookie?

0

Я пытаюсь воспроизвести эффект пользовательского интерфейса, как наhttp://mcfc.co.uk Я написал скрипт, который скрывает элемент div при нажатии и применяет класс к элементу div с идентификатором #id, соответствующим элементу div, по которому был выполнен щелчок, и наоборот. Я новичок в jQuery, как бы я сохранил состояние этих «нажатых» div в cookie, чтобы показать, какие были скрыты и т. Д. ??

Спасибо за любую помощь.

<script type="text/javascript">

$(document).ready(function(){
    $('.portlet').click( function(){ 
        var idtext = this.id;
        $(this).hide();
        $("[id*=" + idtext + "]").not(this).addClass('add'); 
    });

    $("#content-footer div").click( function(){
        var idtext = this.id;   
        $(this).removeClass('add');                 
        $("[id*=" + idtext + "]").not(this).show();
    }); 
})

</script>

HTML:

DIV, которые скрыты / показываются при нажатии .....

<div class="column" id="col0">

<div class="portlet" id="p_0">
  <div class="portlet-header">Feeds</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  </div>
</div>
<div class="portlet" id="p_1">
  <div class="portlet-header">News</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  </div>
</div>

</div>

etc....

DIV, что класс применяется к .....

<div id="content-footer">
  <div id="p_0"></div>
  <div id="p_1"></div>
  <div id="p_2"></div>
  <div id="p_3"></div>
  <div id="p_4"></div>
</div>
У вас нет уникальных идентификаторов в вашем HTML, предоставленных с помощью$("[id*="+ idtext +"]") будет работать, но я не думаю, что это хорошая практика. Mottie
отредактируйте форматирование, сначала выберите код в своем вопросе, а затем нажмите кнопку кода. Gabriele Petrioli

Ваш Ответ

2   ответа
2

демонстрация того, что я думаю, вы хотите здесь, Не забудьте включитьплагин jQuery cookie.

Вот HTML-код, который я использовал:

<div class="column" id="col0">

<div class="portlet" id="p_0">
  <div class="portlet-header">Feeds</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="p_1">
  <div class="portlet-header">News</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="p_2">
  <div class="portlet-header">Extra</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="p_3">
  <div class="portlet-header">Other</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="p_4">
  <div class="portlet-header">Last</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>

</div>

<div id="content-footer">
  <div name="p_0">p0 - Feeds</div>
  <div name="p_1">p1 - News</div>
  <div name="p_2">p2 - Extra</div>
  <div name="p_3">p3 - Other</div>
  <div name="p_4">p4 - Last</div>
</div>

И сценарий:

$(document).ready(function(){
 var cookie = $.cookie("hidden");
 var hidden = cookie ? cookie.split("|").getUnique() : [];
 var cookieExpires = 7; // cookie expires in 7 days, or set this as a date object to specify a date

 // Remember content that was hidden
 $.each( hidden, function(){
  var pid = this; //parseInt(this,10);
  $('#' + pid).hide();
  $("#content-footer div[name='" + pid + "']").addClass('add');
 })

 // Add Click functionality
 $('.portlet').click(function(){
  $(this).hide();
  $("#content-footer div[name=" + this.id + "]").addClass('add');
  updateCookie( $(this) );
 });
 $("#content-footer div").click(function(){
  $(this).toggleClass('add');
  var el = $("div#" + $(this).attr('name'));
  el.toggle();
  updateCookie( el );
 });

 // Update the Cookie
 function updateCookie(el){
  var indx = el.attr('id');
  var tmp = hidden.getUnique();
  if (el.is(':hidden')) {
   // add index of widget to hidden list
   tmp.push(indx);
  } else {
   // remove element id from the list
   tmp.splice( tmp.indexOf(indx) , 1);
  }
  hidden = tmp.getUnique();
  $.cookie("hidden", hidden.join('|'), { expires: cookieExpires } );
 }
}) 

// Return a unique array.
Array.prototype.getUnique = function() {
 var o = new Object();
 var i, e;
 for (i = 0; e = this[i]; i++) {o[e] = 1};
 var a = new Array();
 for (e in o) {a.push (e)};
 return a;
}

// Fix indexOf in IE
if (!Array.prototype.indexOf) {
 Array.prototype.indexOf = function(obj, start) {
  for (var i = (start || 0), j = this.length; i < j; i++) {
   if (this[i] == obj) { return i; }
  }
  return -1;
 }
}

Обновление: добавлен прототип "indexOf" в конце скрипта выше, чтобы исправить ошибку IE

Обновление № 2: Добавлена переменная cookieExpires, используйте число, чтобы установить количество дней, установите его в качестве даты (), чтобы установить конечную дату, или «ноль», чтобы установить его в качестве файла cookie сеанса.

Еще раз спасибо, Фаджи, я не знал об этом, отлично! RobW
Хорошо, я понял ... по-видимому, IEindexOf Функция JavaScript является foobared. Я добавил исправление в конец кода благодаря этому посту (stackoverflow.com/questions/1744310/...). Код и демо были обновлены! Mottie
тьфу, # & $ ^% IE не сотрудничает. Я думаю, что мне нужна помощь, чтобы понять, почему это работает для всех браузеров, кроме IE. Mottie
У меня проблемы с этим в IE, он не будет показывать портлеты при загрузке страницы, Mozilla в порядке ?? RobW
Фаджи - этот сценарий достигает именно того, что я пытался сделать. Очень признателен - уникальные # селекторы, принятые на борт. Благодарю. stackoverflow = отличное место RobW
2

вы можете воспользоваться этим и использовать очень простой и легкий в использовании плагин,печенье:

Вы можете увидеть некоторыедемос Вот.

Или здесь:

$.cookie("myCookie", true);

alert($.cookie("myCookie")); // alerts true. but remember, it's always returned as a string.

Обновление с примером использования:

$(document).ready(function(){
    $('.portlet').click(function(){ 
        var idtext = this.id;
        $(this).hide();
        $("[id*="+ idtext +"]").not(this).addClass('add'); 
        $.cookie(idtext, false);
    });

    $("#content-footer div").click(function(){
        var idtext = this.id;   
        $(this).removeClass('add');                 
        $("[id*="+ idtext +"]").not(this).show();
        $.cookie(idtext, true);
    }); 
})

Как видите, мы устанавливаем видимое состояние этого текущего идентификатора (idtext) в cookie со значением true или false. При загрузке этих портлетов вы можете проверить файлы cookie (серверные или клиентские, по вашему выбору) и обслуживать внешний интерфейс по желанию. Скажите, если вам нужна дополнительная помощь :-)

спасибо, например, - как бы я мог манипулировать этим значением, хранящимся в 'idtext', и обновлять 'portlet' и связанный с ним div # clientide, без бэкэнда? RobW
Без проблем ;-) Kordonme
Спасибо, что указали мне правильное направление - очень помогли RobW
спасибо за совет kordonme. Просматривая этот плагин, я не уверен, как его реализовать, чтобы сохранить состояние для каждого div # - и эквивалентный класс div # при каждом нажатии? RobW
На самом деле Fudgey опубликовал идеальный демо. Это похоже на то, что вы хотите :-) Kordonme

Похожие вопросы