Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.04.2018, 23:27
Интересующийся
Отправить личное сообщение для Ty_Meow Посмотреть профиль Найти все сообщения от Ty_Meow
 
Регистрация: 06.01.2017
Сообщений: 17

Проблема с перелистыванием div блоков
Здравствуйте.
Есть код:
pages = 1;
function listNext(page) {
  if (page == 1)
    prev_page = pages;
  else
    prev_page = page-1;
  if (page == pages)
    next_page = 1;
  else
    next_page = page+1;
  prev_id = "page_" + prev_page;
  prev_elem = document.getElementById(prev_id);
  prev_elem.style.display = "none";
  
  id = "page_" + page;
  elem = document.getElementById(id);
  elem.style.display = "block";
  
}

<div class="btn_back"><</div>
	       <div class="btn_forward" onclick="listNext(2)">></div>
<div id="page_1">
	<h3>Апрель 2018</h3>
			<ul class="days">
				<li class="day other-month">
					<div class="date">Понедельник, 26</div>
				</li>
				<li class="day other-month">
					<div class="date">Вторник, 27</div>
				</li>
				<li class="day other-month">
					<div class="date">Среда, 28</div>
				</li>
				<li class="day other-month">
					<div class="date">Четверг, 29</div>
				</li>
				<li class="day other-month">
					<div class="date">Пятница, 30</div>
				</li>
				<li class="day other-month">
					<div class="date">Суббота, 31</div>
				</li>
				<li class="day__event">
					<div class="date">Воскресенье, 1</div>
					<div class="event">
						<div class="event-desc">
							<br></br>
						</div>
						<div class="event-time"></div>
					</div>
				</li>
			</ul>
<div id="page_2">
	<h3>Май 2018</h3>
			<ul class="days">
				<li class="day other-month">
					<div class="date">Понедельник, 30</div>
				</li>
				<li class="day">
					<div class="date">Вторник, 1</div>
				</li>
				<li class="day">
					<div class="date">Среда, 2</div>
				</li>
				<li class="day">
					<div class="date">Четверг, 3</div>
				</li>
				<li class="day">
					<div class="date">Пятница, 4</div>
				</li>
				<li class="day">
					<div class="date">Суббота, 5</div>
				</li>
				<li class="day__event">
					<div class="date">Воскресенье, 6</div>
					<div class="event">
						<div class="event-desc">
							<br></br>
						</div>
						<div class="event-time"></div>
					</div>
				</li>
			</ul>

При нажатии на кнопку с классом btn_forward - Js перелистывает содержимое с <div id="page_1"> на <div id="page_2">.
Подскажите пожалуйста, как переписать код js так чтобы он возвращал с <div id="page_2"> на <div id="page_1">. Хочу сделать календарь, застрял на переходе по месяцам. Всю голову уже сломал
Заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 16.04.2018, 23:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,091

Ty_Meow,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  <script>
var index = 0, len = 2;
function listNext() {
  var id = "page_" + (index + 1);
  var elem = document.getElementById(id);
  elem.style.display = "none";
  index++;
  if(index == len) index = 0;
  id = "page_" + (index + 1);
  elem = document.getElementById(id);
  elem.style.display = "block";
}

  </script>
</head>

<body>
<div class="btn_back"><</div>
	       <div class="btn_forward" onclick="listNext()">></div>
<div id="page_1">
	<h3>Апрель 2018</h3>
			<ul class="days">
				<li class="day other-month">
					<div class="date">Понедельник, 26</div>
				</li>
				<li class="day other-month">
					<div class="date">Вторник, 27</div>
				</li>
				<li class="day other-month">
					<div class="date">Среда, 28</div>
				</li>
				<li class="day other-month">
					<div class="date">Четверг, 29</div>
				</li>
				<li class="day other-month">
					<div class="date">Пятница, 30</div>
				</li>
				<li class="day other-month">
					<div class="date">Суббота, 31</div>
				</li>
				<li class="day__event">
					<div class="date">Воскресенье, 1</div>
					<div class="event">
						<div class="event-desc">
							<br></br>
						</div>
						<div class="event-time"></div>
					</div>
				</li>
			</ul></div>
<div id="page_2">
	<h3>Май 2018</h3>
			<ul class="days">
				<li class="day other-month">
					<div class="date">Понедельник, 30</div>
				</li>
				<li class="day">
					<div class="date">Вторник, 1</div>
				</li>
				<li class="day">
					<div class="date">Среда, 2</div>
				</li>
				<li class="day">
					<div class="date">Четверг, 3</div>
				</li>
				<li class="day">
					<div class="date">Пятница, 4</div>
				</li>
				<li class="day">
					<div class="date">Суббота, 5</div>
				</li>
				<li class="day__event">
					<div class="date">Воскресенье, 6</div>
					<div class="event">
						<div class="event-desc">
							<br></br>
						</div>
						<div class="event-time"></div>
					</div>
				</li>
			</ul></div>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 16.04.2018, 23:39
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 9,156

А они что оба сразу на странице? Календарь, это ведь запросили месяц/год следующий (можно в общем то и по любому срезу времени перемещаться), запрашиваемое динамически строится.
Ответить с цитированием
  #4 (permalink)  
Старый 17.04.2018, 10:53
Интересующийся
Отправить личное сообщение для Ty_Meow Посмотреть профиль Найти все сообщения от Ty_Meow
 
Регистрация: 06.01.2017
Сообщений: 17

рони,
Скажите пожалуйста, как переписать код чтобы месяцы можно было листать назад по кнопке <div class="btn_back"><</div> ?
Если есть 3 месяца. Чтобы стрелка возвращала с Мая на Апрель и с Апреля на Март, без возврата в исходный месяц.
<div id="page_1">
	<h3>Март 2018</h3>
			<ul class="days">
				<li class="day other-month">
					<div class="date">Понедельник, 26</div>
				</li>
				<li class="day other-month">
					<div class="date">Вторник, 27</div>
				</li>
				<li class="day other-month">
					<div class="date">Среда, 28</div>
				</li>
				<li class="day other-month">
					<div class="date">Четверг, 29</div>
				</li>
				<li class="day other-month">
					<div class="date">Пятница, 30</div>
				</li>
				<li class="day other-month">
					<div class="date">Суббота, 31</div>
				</li>
				<li class="day__event">
					<div class="date">Воскресенье, 1</div>
					<div class="event">
						<div class="event-desc">
							<br></br>
						</div>
						<div class="event-time"></div>
					</div>
				</li>
			</ul></div>
<div id="page_2">
	<h3>Апрель 2018</h3>
			<ul class="days">
				<li class="day other-month">
					<div class="date">Понедельник, 30</div>
				</li>
				<li class="day">
					<div class="date">Вторник, 1</div>
				</li>
				<li class="day">
					<div class="date">Среда, 2</div>
				</li>
				<li class="day">
					<div class="date">Четверг, 3</div>
				</li>
				<li class="day">
					<div class="date">Пятница, 4</div>
				</li>
				<li class="day">
					<div class="date">Суббота, 5</div>
				</li>
				<li class="day__event">
					<div class="date">Воскресенье, 6</div>
					<div class="event">
						<div class="event-desc">
							<br></br>
						</div>
						<div class="event-time"></div>
					</div>
				</li>
			</ul></div>
<div id="page_3">	
	<h3>Май 2018</h3>		
			<ul class="days">
				<li class="day">
					<div class="date">7</div>
				</li>
				<li class="day">
					<div class="date">8</div>
				</li>
				<li class="day">
					<div class="date">9</div>
				</li>
				<li class="day">
					<div class="date">10</div>
				</li>
				<li class="day">
					<div class="date">11</div>
				</li>
				<li class="day">
					<div class="date">12</div>
				</li>
			</ul></div>

Последний раз редактировалось Ty_Meow, 17.04.2018 в 11:02.
Ответить с цитированием
  #5 (permalink)  
Старый 17.04.2018, 11:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,091

Ty_Meow,
не понимаю
Ответить с цитированием
  #6 (permalink)  
Старый 17.04.2018, 11:11
Интересующийся
Отправить личное сообщение для Ty_Meow Посмотреть профиль Найти все сообщения от Ty_Meow
 
Регистрация: 06.01.2017
Сообщений: 17

рони,
Есть ваш js код:
var index = 0, len = 3;
function listNext() {
  var id = "page_" + (index + 1);
  var elem = document.getElementById(id);
  elem.style.display = "none";
  index++;
  if(index == len) index = 0;
  id = "page_" + (index + 1);
  elem = document.getElementById(id);
  elem.style.display = "block";
}

Он отлично листает мои месяцы вперед друг за другом по кнопке <div class="btn_forward" onclick="listNext()">></div> Спасибо за него )
Но мне еще нужно как то и назад их листать По нажатию этой кнопки <div class="btn_back" onclick="listPrev()"><</div>
Так вот , как js код изменить нужно , чтобы месяцы листались назад?
Ответить с цитированием
  #7 (permalink)  
Старый 17.04.2018, 11:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,091

Ty_Meow,
строки 6,7
index--;
 if(index < 0) index = len - 1;
Ответить с цитированием
  #8 (permalink)  
Старый 17.04.2018, 17:28
Интересующийся
Отправить личное сообщение для Ty_Meow Посмотреть профиль Найти все сообщения от Ty_Meow
 
Регистрация: 06.01.2017
Сообщений: 17

рони,
Спасибо большое!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Парсинг HTML -> DOM в нормальных браузерах (таки проблема) FINoM Events/DOM/Window 9 19.01.2014 15:38
Проблема с меню на JS в Firefox MaxPayne Элементы интерфейса 0 24.10.2013 13:32
Проблемы с div обновлённым через (#id).load erlcat jQuery 4 03.03.2013 01:41
проблема с обработкой DIV nerik AJAX и COMET 2 22.08.2008 16:40
Проблема - падает скроленый div ниже плинтуса Klio Общие вопросы Javascript 6 14.08.2008 16:48