Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.12.2017, 13:43
Новичок на форуме
Отправить личное сообщение для Sonic911 Посмотреть профиль Найти все сообщения от Sonic911
 
Регистрация: 08.12.2017
Сообщений: 9

сохранение положения открыт/закрыт блока в localStorage.
Всем Привет!

имеется скрипт:

$('.collapse-link').on('click', function () {
        var ibox = $(this).closest('div.ibox');
        var button = $(this).find('i');
        var content = ibox.children('.ibox-content');
        content.slideToggle(200);
        button.toggleClass('fa-arrows-v').toggleClass('fa-arrows-v');
        ibox.toggleClass('').toggleClass('border-bottom');
        setTimeout(function () {
            ibox.resize();
            ibox.find('[id^=map-]').resize();
        }, 50);
        var info;
        if(content.css("display") == none)
        {
            info = none;
        }
        else
        {
            info = ok;
        }
        localStorage.setItem(ibox.id,info);




    });


html блока:

<div class="ibox">
  <span class="collapse-link">
    <div  class="ibox-title">
        <h5 style="">Title</h5>
        <div class="ibox-tools">

                <i class="fa fa-arrows-v"></i>


        </div>
    </div>
    </span>
    <div id="block-1" class="ibox-content">
               Text
        
    </div>
</div>


И собственно скрипт при загрузке страницы:

$(document).ready(function() {
    var block1 = localStorage.getItem('block-1');
    if(block1 == none)
    {
        var ibox = getElementById("block-1");
        ibox.addClass("block-hide");
    }
    else:
    {
        continue;
    }
    });


На сайте имеются несколько блоков, состоящих из Заголовка и Контента.
Первоначально, при заходе на сайт пользователь видит и текст и заголовок. При клике(onClick скрипт) контент скрывается, при повторном - открывается. Я сохраняю в localStorage id блока и его текущее состояние. Далее при перезагрузке страницы я проверяю положение блока(открыт/закрыт), если он был скрыт(info = none) я добавляю class с display:none и скрываю его, в противном случае не делаю ничего. Js изучаю недавно, поэтому с большего хочу с этим разобраться, нежели просто получить ответ . Сам onClick скрипт без сохранения открыт/закрыт рабочий. В localStorage храниться массив из id+info.
Ответить с цитированием
  #2 (permalink)  
Старый 08.12.2017, 13:54
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,795

Sonic911, в чем вопрос?)
ps. "none" и "ok" в строчках 15 и 19,13 соответственно нужно в кавычки занести, т.к. таких переменных вы скорее всего не создавали.
Что вы хотели сделать этой операцией?
ibox.toggleClass('').toggleClass('border-bottom');

Большинство методов jq возвращают ссылку на саму себя, поэтому строки 9-10 можно переписать так:
ibox.resize().find('[id^=map-]').resize();
//можно еще так попробовать:
ibox.find('[id^=map-]').addBack().resize();

Взаимодействие с localStorage лучше всего оборачивать в try catch, т.к. операция может завершиться фейлом по разным причинам.
После "else" двоеточие не ставится.
Если используете jQuery, то используйте его везде.
var ibox = getElementById("block-1");
ibox.addClass("block-hide");
//с jq:
$("#block-1").addClass("block-hide");
Ответить с цитированием
  #3 (permalink)  
Старый 08.12.2017, 14:09
Новичок на форуме
Отправить личное сообщение для Sonic911 Посмотреть профиль Найти все сообщения от Sonic911
 
Регистрация: 08.12.2017
Сообщений: 9

Вопрос в том, что все это не работает. Не сохраняет положение блока и + не отображает на странице ничего, собственно кроме этого блока)
toggleClass грубо говоря добавляет класс border-bottom, брал из примера, не знаю, честно говоря, почему не addClass. По поводу строчки с resize(): весь код до var info рабочий, проверял отдельно, без сохранения положения.
Ответить с цитированием
  #4 (permalink)  
Старый 08.12.2017, 14:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Sonic911,
что такое
Сообщение от Sonic911
none
?
Ответить с цитированием
  #5 (permalink)  
Старый 08.12.2017, 14:22
Новичок на форуме
Отправить личное сообщение для Sonic911 Посмотреть профиль Найти все сообщения от Sonic911
 
Регистрация: 08.12.2017
Сообщений: 9

в строке info = "none" - строка в которой я забыл кавычки поставить
В "display" == none - параметр style="display:none"
Ответить с цитированием
  #6 (permalink)  
Старый 08.12.2017, 14:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Sonic911,
https://javascript.ru/forum/dom-wind...tml#post407866
Ответить с цитированием
  #7 (permalink)  
Старый 08.12.2017, 15:08
Новичок на форуме
Отправить личное сообщение для Sonic911 Посмотреть профиль Найти все сообщения от Sonic911
 
Регистрация: 08.12.2017
Сообщений: 9

Спасибо за пример, посмотрю. Как я понял, пример написан не через localStorage, а через печеньки. Возник вопрос, что лучше?) P.s Вопрос актуален

Последний раз редактировалось Sonic911, 08.12.2017 в 16:03.
Ответить с цитированием
  #8 (permalink)  
Старый 08.12.2017, 15:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Sonic911,
лучше то, что вам проще.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена координаты блока в зависимости от положения курсора 310 Элементы интерфейса 3 21.07.2016 22:45
сохранение через localstorage Titanic Ваши сайты и скрипты 3 11.10.2015 02:11
слайд панели tadjik1 Элементы интерфейса 22 02.04.2012 17:13
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21