Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.02.2018, 02:00
Аспирант
Отправить личное сообщение для wisma Посмотреть профиль Найти все сообщения от wisma
 
Регистрация: 10.02.2014
Сообщений: 32

Помогите с localStorage
Есть скрипт:
$('.fn_switch').click(function(e){
        e.preventDefault();

        $(this).next().slideToggle(300);

        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
        }
        else {
            $(this).addClass('active');
        }
	});

Погуглив попробывал этот код:

$('.fn_switch').click(function(e){
        e.preventDefault();

        $(this).next().slideToggle(300);

        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
			window.localStorage.hasActiveClass = 'active';
        }
        else {
            $(this).addClass('active');
			window.localStorage.hasActiveClass = '';
        }
			var hasClass = window.localStorage.hasActiveClass || '';
		if (JSON.parse(hasClass)) {
			$('.fn_switch').addClass("active");
		}
	});



Разметка в html
<div class="h2 filter_name fn_switch" data-vkladka="1">Вес <i class="angle_icon"></i></div>
			
                <div class="filter_group">
                    
                    <div class="filter_item">
                                               ****
                    
                </div>
                            
                <div class="h2 filter_name fn_switch active" data-vkladka="2">Страна производитель
				<i class="angle_icon"></i>
				</div>
			
                <div class="filter_group" style="display: none;">
                    
                    <div class="filter_item">
                                           *******
                        </div>
                    
                </div>


И при обноввлении страницы вкладки которым присвоен был класс active не запомнился(

помогите пожалуйста(

Последний раз редактировалось wisma, 26.02.2018 в 02:45.
Ответить с цитированием
  #2 (permalink)  
Старый 26.02.2018, 03:11
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<style>
		.active{
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="fn_switch">1</div><div></div>
	<div class="fn_switch">2</div><div></div>
	<div class="fn_switch">3</div><div></div>
	<div class="fn_switch">4</div><div></div>
	<div class="fn_switch">5</div><div></div>
	<div class="fn_switch">6</div><div></div>
	<div class="fn_switch">7</div><div></div>

	<script>
		$(function(){

			$('.fn_switch').click(function(e){

				e.preventDefault();

				$(this).next().slideToggle(300);


				if ($(this).hasClass('active')) {
					$(this).removeClass('active');
				}
				else {
					$(this).addClass('active');
				}

				var arr = $.map($('.fn_switch'), function(el, i){
					if($(el).hasClass('active')) return i;
				});

				localStorage.setItem('ind', JSON.stringify(arr));
			});

			var arr = JSON.parse(localStorage.getItem('ind'));
			if(arr){
				$('.fn_switch').filter(function(i){
					return arr.includes(i);
				}).addClass('active').next().show();
			}	
		});

	</script>
</body>
</html>


как вариант индексы запомнить

Последний раз редактировалось j0hnik, 26.02.2018 в 04:03.
Ответить с цитированием
  #3 (permalink)  
Старый 26.02.2018, 03:47
Аспирант
Отправить личное сообщение для wisma Посмотреть профиль Найти все сообщения от wisma
 
Регистрация: 10.02.2014
Сообщений: 32

Сообщение от j0hnik Посмотреть сообщение
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<style>
		.active{
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="fn_switch">1</div><div></div>
	<div class="fn_switch">2</div><div></div>
	<div class="fn_switch">3</div><div></div>
	<div class="fn_switch">4</div><div></div>
	<div class="fn_switch">5</div><div></div>
	<div class="fn_switch">6</div><div></div>
	<div class="fn_switch">7</div><div></div>

	<script>
		$(function(){

			$('.fn_switch').click(function(e){

				e.preventDefault();

				$(this).next().slideToggle(300);


				if ($(this).hasClass('active')) {
					$(this).removeClass('active');
				}
				else {
					$(this).addClass('active');
				}

				var arr = $.map($('.fn_switch'), function(el, i){
					if($(el).hasClass('active')) return i;
				});

				localStorage.setItem('ind', JSON.stringify(arr));
			});

			var arr = JSON.parse(localStorage.getItem('ind'));
			if(arr){
				$('.fn_switch').filter(function(i){
					return arr.includes(i);
				}).addClass('active');
			}	
		});

	</script>
</body>
</html>


как вариант индексы запомнить
Оно то работает, но у меня не хочет
исходной код вообще сайта можно глянуть на xpro.com.ua, тестирую до полной работы на локалке(

Я даже менял названия класса fn_switch на другой, но толку не дало(
Там-же можно и увидеть что при добавлении класса active следующему диву ставится
style="display:block;"

А вот если обновить страничку, то выходит что класс Актив он добавляет, но следующий блок без display:block; (

Последний раз редактировалось wisma, 26.02.2018 в 03:52.
Ответить с цитированием
  #4 (permalink)  
Старый 26.02.2018, 04:08
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

добавил next().show()

пост обновил
Ответить с цитированием
  #5 (permalink)  
Старый 26.02.2018, 04:11
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Я то думал у вас совсем не работает ничего, а тут мелочь такая, соседний блок показать
Ответить с цитированием
  #6 (permalink)  
Старый 26.02.2018, 04:37
Аспирант
Отправить личное сообщение для wisma Посмотреть профиль Найти все сообщения от wisma
 
Регистрация: 10.02.2014
Сообщений: 32

Сообщение от j0hnik Посмотреть сообщение
Я то думал у вас совсем не работает ничего, а тут мелочь такая, соседний блок показать

Все отлично и супер, но есть небольшое НО, возможно ли это все привязать допустим к

<div class="h2 filter_name fn_switch" data-switch="тут уникальный айди">



data-switch? т.к. генерировать уникальное числовое значение мы (точнее движок) там может.... А если через индексы то выходит в других категориях товарах, с другими фильтрамы автоматом active привязывает к другим елементам, и выходит не удобно

Последний раз редактировалось wisma, 26.02.2018 в 04:40.
Ответить с цитированием
  #7 (permalink)  
Старый 26.02.2018, 04:39
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

wisma,
если это нужно на одной странице, лучше проверять ее адрес, и если тот загружать из localStorage
Ответить с цитированием
  #8 (permalink)  
Старый 26.02.2018, 04:44
Аспирант
Отправить личное сообщение для wisma Посмотреть профиль Найти все сообщения от wisma
 
Регистрация: 10.02.2014
Сообщений: 32

Сообщение от j0hnik Посмотреть сообщение
wisma,
если это нужно на одной странице, лучше проверять ее адрес, и если тот загружать из localStorage
Это используется на 120 страницах допустим, и на каждой странице свои значения, но суть я понял, а теперь последний вопрос, как же это реализировать?

Или при использовании проверки через data и множеству значений мы получим очень большой файл хранилища?
Ответить с цитированием
  #9 (permalink)  
Старый 26.02.2018, 04:51
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<style>
		.active{
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="fn_switch">1</div><div></div>
	<div class="fn_switch">2</div><div></div>
	<div class="fn_switch">3</div><div></div>
	<div class="fn_switch">4</div><div></div>
	<div class="fn_switch">5</div><div></div>
	<div class="fn_switch">6</div><div></div>
	<div class="fn_switch">7</div><div></div>

	<script>
		$(function(){

			var adr = document.location.pathname; // станица
			
			$('.fn_switch').click(function(e){

				e.preventDefault();

				$(this).next().slideToggle(300);


				if ($(this).hasClass('active')) {
					$(this).removeClass('active');
				}
				else {
					$(this).addClass('active');
				}

				var arr = $.map($('.fn_switch'), function(el, i){
					if($(el).hasClass('active')) return i;
				});

				localStorage.setItem(adr, JSON.stringify(arr));
			});

			var arr = JSON.parse(localStorage.getItem(adr));
			if(arr){
				$('.fn_switch').filter(function(i){
					return arr.includes(i);
				}).addClass('active').next().show();
			}	
		});

	</script>
</body>
</html>


должно сработать
Ответить с цитированием
  #10 (permalink)  
Старый 26.02.2018, 04:55
Аспирант
Отправить личное сообщение для wisma Посмотреть профиль Найти все сообщения от wisma
 
Регистрация: 10.02.2014
Сообщений: 32

Сообщение от j0hnik Посмотреть сообщение

должно сработать
Спасибо огромное!) Все отлично работает)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
localstorage service script ExXxTaSy Общие вопросы Javascript 15 27.01.2017 12:49
Можно ли использовать значение из localstorage в PHP smart-create Events/DOM/Window 12 07.11.2016 02:54
LocalStorage удаление данных neon_tmn Общие вопросы Javascript 8 21.10.2016 15:22
Обход элементов localStorage berserk10 Events/DOM/Window 8 11.08.2013 14:55
Не сохраняется localStorage после перезагрузки браузера Бобр Firefox/Mozilla 1 20.10.2011 20:31