Сохранить состояние Скрыть или Показать Div только для одного div, у которого было то же самое множественное div

Question

Сохранить состояние Скрыть или Показать Div только для одного div, у которого было то же самое множественное div

0

Я хотел бы задать вопрос. У меня был этот двухклассный класс, у которого был одинаковый элемент html для каждого (на самом деле в моем проекте так много классного класса). У каждой скважины есть функциональность, чтобы показать и скрыть. Моя проблема в том, что я хочу сохранить состояние hide/show только для каждой скважины div.Im с использованием jquery и jquery cookie. Мне удалось сделать это, но все хорошие 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 для этого ПРИМЕР

zick 23 сен. 2013, в 09:37

Источник

Теги:

jquery

html

show-hide

2 ответа

Ещё вопросы

zick · Answer 1 · 2013-10-01T01-57-00.000Z

Спасибо Sayonji за ваше предложение.

Важное примечание. Мне нужно дать идентификатор всем классам скважин. Теперь мне удается делать файлы cookie с минимальными значениями для каждого класса div well, используя каждую функцию... внутри этого я звоню в функцию события click..bow это мое решение на 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');

        }

    });
  });

Serge Seredenko · Answer 2 · 2013-09-23T07-19-00.000Z

Итак, вы хотите сохранить состояние для каждого div отдельно, что логично. Я могу предложить вам два пути:

1) Каждому div.well присваивается уникальный идентификатор

<div class='well ...' id='wellState_0'>
...
<div class='well ...' id='wellState_1'>
...

И затем вы сохраняете эти идентификаторы в файлах cookie:

$.cookie($(this).parents('.well').attr('id'), 'show')

2) Вы автоматически генерируете идентификаторы с помощью javascript через нумерацию divs:

$.cookie(
    'wellState_' +
    $('.well').index($(this).parents('.well')[0]),
    'show'
)

Спасибо за ваш отзыв .. но опять же, как я собираюсь вызвать cookie позже после сохранения его в cookie? .. Я использую первый метод ..
Примерно так: $('body').load(function() { $('li.collapse_well a').each(function(){ var state = $.cookie($(this).parents('.well').attr('id')); if (state == 'hide') ... else ... }) })