Checkout Radial Fortschritt Bar Ereignis

Question

Ich habe die radiale Kasse Fortschrittsbalken mit einigen Animationen und Übergang erstellt. Das Ereignis wurde auf der Schaltfläche hinzugefügt. Aber das Problem ist, ich habe den unterschiedlichen Inhalt für jeden Schritt in der Kasse. Was ist die beste Vorgehensweise? Ist es besser die Daten zu verwenden? dafür. Der Inhalt sollte versteckt und für bestimmte Checkouts angezeigt werden. 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

Warum sind Sie sich wiederholende Aktionen (neben & pev) Tasten in Enthalten Abschnitt in jeder Phase. Machen Sie es neuen Abschnitt namens .actions dann Sie Ihre Aktionen Tasten ihre platzieren können ... Dann können Sie data-target Attribut, das den Wert der Schrittnummer hält, auf die sie gehen müssen, wenn es ... geklickt

Und Sie brauchen zu ändern, data-target Attribut jedes Mal, wenn es klickt, die Benutzer als nächstes bewegen möchten ... Und auch gleich mit pv-Taste ...