Javascript-форум - Переключатель блоков в калькуляторе

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Переключатель блоков в калькуляторе (https://javascript.ru/forum/events/70865-pereklyuchatel-blokov-v-kalkulyatore.html)

Переключатель блоков в калькуляторе

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

$(".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();
		});
	});

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

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

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

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

<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>

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>

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

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