Как начать добавление класса со 2 го пункта?

Question

[RushV]

Всех приветствую!

<form>
  <div id="step-1">1</div>
  <div id="step-2" class="d-none">2</div>
  <div id="step-3" class="d-none">3</div>
  <div id="step-4" class="d-none">4</div>
  <div id="step-5" class="d-none">5</div>
  <button type="button" class="btn btn-success rounded-pill py-3 px-5 mx-auto text-dark fw-bold" id="prevBtn">Далее</button>
</form>

let step = 0; // текущее состояние, будет увеличиваться
    $('#prevBtn').click(function() { 
      step = Math.min(5, step + 1); 
      if (step === 5) $(this).attr('disabled', true); 
      document.querySelectorAll('[id^="step"]')
        .forEach((e) => { 
          const n = +e.id.substr(5);
          if (n >= 2) {
              e.classList.remove("d-none")
              e.classList.add("d-block")
            } else {
              e.classList.remove("d-block")
              e.classList.add("d-none")
            }
        });
    });

Answer 1

[Сергей Соколов]

if (n >= 2) {
  if (step === n) {
    e.classList.remove("d-none")
    e.classList.add("d-block")
  } else {
    e.classList.remove("d-block")
    e.classList.add("d-none")
  }
}

Comments

[RushV]

Со второго клика только срабатывает(
Код

[lUser L]

RushV,

let step = 0; // текущее состояние, будет увеличиваться

Сами же комментарий написали... измените 0 на 1

[RushV]

Эмиль 🔥, прошу прощения не внимательность, Спасибо!

Answer 2

[SagePtr]

Если ради применения стиля, то nth-child или nth-of-type использовать и не изобретать велосипеды

Comments

[lUser L]