Оформить заказ радиальный индикатор выполнения событий

Question

Я создал радиальный контрольный индикатор выполнения с некоторой анимацией и переходом. Добавлено событие на кнопке. Но проблемы в том, что у меня есть различный контент для каждого шага в кассе. Какова наилучшая практика. Лучше использовать данные attr. для этого. Содержимое должно скрываться и отображаться для определенной проверки. codepen

<div class="step-1" id="checkout-progress" data-current-step="1"> 
    <div class="progress-bar"> 
     <div class="step step-1 active " data-step="1"><span> 1</span> 
      <div class="step-check">t</div> 
      <div class="step-label"> address</div> 
     </div> 
     <div class="step step-2" data-step="2"><span> 2</span> 
      <div class="step-check">a</div> 
      <div class="step-label"> shipping</div> 
     </div> 
     <div class="step step-3" data-step="3"><span> 3</span> 
      <div class="step-check">b</div> 
      <div class="step-label"> payment</div> 
     </div> 
     <div class="step step-4" data-step="4"><span> 4</span> 
      <div class="step-check">3</div> 
      <div class="step-label"> summary</div> 
     </div> 
    </div> 
</div> 
<!-- <div class="button-container"> 
    <div class="btn btn-prev"> previous step</div> 
    <div class="btn btn-next"> next step</div> 
</div> --> 


<div class="checkout-content" data-step="1"> 
    <h1>checkout content 1</h1> 
    <div class="btn btn-next"> next step</div> 
    <div class="btn btn-next"> next step</div> 
</div> 
<div class="checkout-content" data-step="2"> 
    <h1>checkout content 2</h1> 
    <div class="btn btn-next"> next step</div> 
    <div class="btn btn-next"> next step</div> 
</div> 
<div class="checkout-content" data-step="3"> 
    <h1>checkout content 3</h1> 
    <div class="btn btn-next"> next step</div> 
    <div class="btn btn-next"> next step</div> 
</div> 
<div class="checkout-content" data-step="4"> 
    <h1>checkout content 4</h1> 
    <div class="btn btn-next"> next step</div> 
    <div class="btn btn-next"> next step</div> 
</div> 


$('.btn-next').on('click', function() { 

    var currentStepNum = $('#checkout-progress').data('current-step'); 
    var nextStepNum = (currentStepNum + 1); 
    var currentStep = $('.step.step-' + currentStepNum); 
    var nextStep = $('.step.step-' + nextStepNum); 
    var progressBar = $('#checkout-progress'); 
    $('.btn-prev').removeClass('disabled'); 
    if(currentStepNum == 5) { 
     return false; 
    } 
    if(nextStepNum == 5){ 
     $(this).addClass('disabled'); 
    } 
    // $('.checkout-progress').removeClass('.step-' + currentStepNum).addClass('.step-' + (currentStepNum + 1)); 

    currentStep.removeClass('active').addClass('valid'); 
    currentStep.find('span').addClass('opaque'); 
    currentStep.find('.step-check').removeClass('opaque'); 

    nextStep.addClass('active'); 
    progressBar.removeAttr('class').addClass('step-' + nextStepNum).data('current-step', nextStepNum); 
}); 


$('.btn-prev').on('click', function() { 

    var currentStepNum = $('#checkout-progress').data('current-step'); 
    var prevStepNum = (currentStepNum - 1); 
    var currentStep = $('.step.step-' + currentStepNum); 
    var prevStep = $('.step.step-' + prevStepNum); 
    var progressBar = $('#checkout-progress'); 
    $('.btn-next').removeClass('disabled'); 
    if(currentStepNum == 1) { 
     return false; 
    } 
    if(prevStepNum == 1){ 
     $(this).addClass('disabled'); 
    } 
    // $('.checkout-progress').removeClass('.step-' + currentStepNum).addClass('.step-' + (prevStepNum)); 

    currentStep.removeClass('active'); 
    prevStep.find('span').removeClass('opaque'); 
    prevStep.find('.step-check').addClass('opaque'); 

    prevStep.addClass('active').removeClass('valid'); 
    progressBar.removeAttr('class').addClass('step-' + prevStepNum).data('current-step', prevStepNum); 
}); 

Answer 1

Почему вы повторяющиеся действия (следующий & П) кнопки в Содержать раздел в каждой стадии. Создайте новый раздел под названием .actions, тогда вы можете поместить свои кнопки действий в свои ... Тогда вы можете получить атрибут data-target, который содержит значение stepNumber, к которому он должен идти, когда он щелкнул ...

И вам нужно чтобы изменить атрибут data-target каждый раз, когда он нажимает, на который вы хотите, чтобы пользователь переместился дальше ... А также то же самое с кнопкой pev ...