Obecnie pracuję nad wielopoziomowym formularzem kontaktowym. Doskonale przechodzi na następny poziom, ale mam problem z paskiem postępu. Nie mogę przejść „aktywnej” klasy do następnego kroku, gdy poziom się zmieni.

Poniżej znajduje się przykładowy kod HTML utworzony do demonstracji. Proszę o pomoc

$(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>
-1
Sam 2 kwiecień 2020, 18:50

3 odpowiedzi

Najlepsza odpowiedź

Musisz spojrzeć na DRY - nie powtarzaj się

  • użyj tej samej klasy dla każdego tego samego typu
  • w razie potrzeby użyj identyfikatorów na przedmiotach, jeśli chcesz uzyskać do nich bezpośredni dostęp
  • użyj next () i parent (), aby uzyskać dostęp do rodzeństwa
$(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>
1
mplungjan 2 kwiecień 2020, 20:20

Możesz użyć konfiguracji takiej jak poniżej:

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>
1
mplungjan 2 kwiecień 2020, 16:09

Podane powyżej rozwiązania są doskonałe. Chociaż mój kod jest bardziej złożony, „bieżąca sekcja” jest kontrolowana przez inny skrypt w moim kodzie, ale bardzo zainspirowały mnie te rozwiązania, aby moje działały. Udało mi się dodać przycisk Wstecz.

Poniżej znajduje się fragment, który wykonałem, zainspirowany powyższymi rozwiązaniami. Dodałem przycisk Wstecz. Będzie to dobre rozwiązanie dla każdego, kto chce zrobić rozwiązanie wieloetapowe (może to być prosty suwak) z przyciskami Wstecz i Dalej; ukryte sekcje i pasek postępu

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>
0
Anurag Srivastava 20 kwiecień 2020, 14:59