JQuery Удаление и добавление класса в выражении Multi -условия с функцией Onclick

Question

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

Ниже приведен пример HTML, созданный для демонстрации. Пожалуйста, помогите

$(document).ready(function() {

  // this works. It adds "active" to the step 1 on window load
  if ($(".section1").hasClass('current-section')) {
    $(".step1").addClass("active");
  }

  //this is meant to remove the class "active" from step 1 and add to step 2 but it doesn't work
  $(".btn1").click(function() {
    if ($(".section2").hasClass('current-section')) {
      $(".step1").removeClass("active");
      $(".step2").addClass("active");
    }
  });

  //this is meant to remove the class "active" from step 2 and add to step 3 but it doesn't work
  $(".btn2").click(function() {
    if ($(".section3").hasClass('current-section')) {
      $(".step2").removeClass("active");
      $(".step3").addClass("active");
    }
  });
});

li.active {
  background: orange;
}

div.current-section {
  background: limegreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="step1">Step 1</li>
  <li class="step4">Step 2</li>
  <li class="step3">Step 2</li>
</ul>

<div class="container">
  <div class="section1 current-section">
    section 1
    <button class="btn1">Next</button>
  </div>

  <div class="section2">
    section 2
    <button class="btn2">Next</button>
  </div>

  <div class="section3">
    section 3
  </div>
</div>

Answer 1

Вам нужно заглянуть в DRY - не повторяться

• использовать один и тот же класс для каждого типа
• , если необходимо, использовать идентификаторы для элементов, если вам нужно для прямого доступа к ним
• используйте next () и parent () для доступа к братьям и сестрам

$(document).ready(function() {

  $(".btn").click(function() {
    const $parent = $(this).parent()
    const $next = $(this).parent().next();
    const $prev = $(this).parent().prev();
    const nextBut = $(this).text() === "Next"
    if ($parent.is('.current-section')) {
      $parent.removeClass('current-section');
      if (nextBut && $next) $next.addClass('current-section');
      else if ($prev) $prev.addClass('current-section');
    }
    const $step = $(".step.active")
    const $prevStep = $step.prev();
    const $nextStep = $step.next();
    $step.removeClass('active');
    if (nextBut && $nextStep) $nextStep.addClass('active');
    else if ($prevStep) $prevStep.addClass('active');
  });

});

li.active {
  background: orange;
}

.section {
  display: none;
}

div.current-section {
  background: limegreen;
}

.current-section {
  display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="step active">Step 1</li>
  <li class="step">Step 2</li>
  <li class="step">Step 2</li>
</ul>

<div class="container">
  <div class="section current-section">
    section 1
    <button class="btn">Next</button>
  </div>

  <div class="section">
    section 2
    <button class="btn">Prev</button>
    <button class="btn">Next</button>
  </div>

  <div class="section">
    section 3
    <button class="btn">Prev</button>
  </div>
</div>

Answer 2

Вы можете использовать настройку, как показано ниже:

function reset() {
  $(".current-section").removeClass('current-section');
  $(".active").removeClass("active");
}

$(document).ready(function() {
  //this works. It adds "active" to the step 1 on window load
  if ($(".section1").hasClass('current-section')) {
    $(".step1").addClass("active");
  }


  //this is meant to remove the class "active" from step 1 and add to step 2 
  $(".btn1").click(function() {
    reset();
    $(".section2").addClass('current-section');
    $(".step2").addClass("active");
  });


  //this is meant to remove the class "active" from step 2 and add to step 3 
  $(".btn2").click(function() {
    reset();
    $(".section3").addClass('current-section');
    $(".step3").addClass("active");
  });

});

li.active {
  background: orange;
}

div.current-section {
  background: limegreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="step1">Step 1
  </li>
  <li class="step2">Step 2
  </li>
  <li class="step3">Step 3
  </li>
</ul>

<div class="container">
  <div class="section1 current-section">
    section 1
    <button class="btn1">Next</button>
  </div>

  <div class="section2">
    section 2
    <button class="btn2">Next</button>
  </div>

  <div class="section3">
    section 3
  </div>
</div>

Answer 3

Решения, представленные выше, превосходны. Хотя мой код более сложный, «current-section» контролируется другим скриптом в моем коде, но эти решения меня очень вдохновили, чтобы моя работа работала. Мне удалось добавить кнопку «Назад».

Ниже приведен фрагмент, созданный мной по мотивам вышеуказанных решений. Я добавил кнопку назад. Это будет хорошо для тех, кто хочет сделать многошаговое решение (это может быть простой слайдер) с кнопками «назад» и «далее»; скрытые разделы и индикатор выполнения

function reset() {
  $(".current-section").removeClass('current-section');
  $(".active").removeClass("active");
}

$(document).ready(function() {
  
  if ($(".section1").hasClass('current-section')) {
    $(".step1").addClass("active");
  }
 
  $(".btn1").click(function() {
    reset();
    $(".section2").addClass('current-section');
    $(".step2").addClass("active");
  });

  $(".btn2").click(function() {
    reset();
    $(".section3").addClass('current-section');
    $(".step3").addClass("active");
  });
  
  $(".prvbtn1").click(function() {
    reset();
    $(".step1").addClass("active");
    $(".section1").addClass('current-section');
  });
  
  $(".prvbtn2").click(function() {
    reset();
    $(".step2").addClass("active");
    $(".section2").addClass('current-section');
  });

});

li.active {
  background: orange;
}

.section1, .section2, .section3 {
 display: none;
}
div.current-section {
  background: limegreen;
}
.current-section {
  display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<ul>
  <li class="step1">Step 1
  </li>
  <li class="step2">Step 2
  </li>
  <li class="step3">Step 3
  </li>
</ul>

<div class="container">
  <div class="section1 current-section">
    section 1
    <button class="btn1">Next</button>
  </div>

  <div class="section2">
    section 2
    <button class="prvbtn1">Prev</button>
    <button class="btn2">Next</button>    
  </div>

  <div class="section3">
    section 3
    <button class="prvbtn2">Prev</button>
  </div>
</div>