Форум

WhiteFox · #1 (**permalink**) 07.10.2017, 21:03

Доброго времени суток, помогите пожалуйста разобраться с скриптом переключения блоков, не доходит как его доделать, работает только на два блока

$(".next").click(function() {
		var	i = 0;
		$(".setting").eq(i).fadeOut();
		$(".setting").eq(++i).fadeIn();
		$(".back").click(function() {
			$(".setting").eq(i).fadeOut();
			$(".setting").eq(--i).fadeIn();
		});
	});

рони · #2 (**permalink**) 07.10.2017, 21:20

WhiteFox,
пока ваш код очень плохой, возможно вам нужно форум поиск открывашка

WhiteFox · #3 (**permalink**) 07.10.2017, 21:28

спасибо, буду разбираться, просто у меня код переключения уже рабочий но большой потому что вписывал по очереди названия всех блоков и им функции...
хочу качать скилл укорачивая его

WhiteFox · #4 (**permalink**) 07.10.2017, 21:34

я думал сделать по классам секций типо
var n = 1;
var i =(".step_" + n);
тоже не получилось, не понял как сделать что бы n менялся на 2,3,4

рони · #5 (**permalink**) 07.10.2017, 21:39

WhiteFox,
напишите html пары ваших блоков.

WhiteFox · #6 (**permalink**) 07.10.2017, 21:40

<header class="step_1 setting">
		<div class="container">
			<div class="row">
				<div class="content">
					<h1>Получите подробный расчет вашего мероприятия за 5 простых шагов.</h1>
					123
					<div class="button">
						<button class="next">Начать</button>
						<button>Расчет не нужен</button>
					</div>
				</div>
			</div>
		</div>
		<div class="ready">
		<p>0%</p>
		</div>
	</header>
	<section class="step_2 setting">
		<div class="container">
			<div class="row">
				<div class="content">
					<h1>Тимбилдинг-программа</h1>
					123
					<div class="button">
						<button class="back">На шаг назад</button>
						<button class="next">Дальше</button>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="step_3 setting">
		<div class="container">
			<div class="row">
				<div class="content">
					<h1>Площадка</h1>
					123
					<div class="button">
						<button class="back">На шаг назад</button>
						<button class="next">Дальше</button>
					</div>
				</div>
			</div>
		</div>
	</section>

рони · #7 (**permalink**) 07.10.2017, 21:58

WhiteFox,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .setting:nth-child(n + 2){
     display: none;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
var i = 0, s = $(".setting"), len = s.length-1;
function fn(n)
{
  n += i;
  if(n < 0 || n > len) return;
  s.eq(i).stop().fadeOut();
  s.eq(n).stop().fadeIn();
  i = n;
}
$(".next").click(function() {fn(1)})
$(".back").click(function() {fn(-1)})

});
  </script>
</head>

<body>
<header class="step_1 setting">
    <div class="container">
      <div class="row">
        <div class="content">
          <h1>Получите подробный расчет вашего мероприятия за 5 простых шагов.</h1>
          111
          <div class="button">
            <button class="next">Начать</button>
            <button>Расчет не нужен</button>
          </div>
        </div>
      </div>
    </div>
    <div class="ready">
    <p>0%</p>
    </div>
  </header>
  <section class="step_2 setting">
    <div class="container">
      <div class="row">
        <div class="content">
          <h1>Тимбилдинг-программа</h1>
          222
          <div class="button">
            <button class="back">На шаг назад</button>
            <button class="next">Дальше</button>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="step_3 setting">
    <div class="container">
      <div class="row">
        <div class="content">
          <h1>Площадка</h1>
          333
          <div class="button">
            <button class="back">На шаг назад</button>
            <button class="next">Дальше</button>
          </div>
        </div>
      </div>
    </div>
  </section>

</body>
</html>

WhiteFox · #8 (**permalink**) 07.10.2017, 23:04

спасибо огромное

рони · #9 (**permalink**) 07.10.2017, 23:30

WhiteFox,
убрал лишнее строк 22 и 23

Форум

Справочник

Discord чат

Курсы javascript