结帐辐射进度条事件

我已经创建了一些动画和过渡的径向结帐进度条。在按钮上添加了事件。但问题是我在结帐的每一步都有不同的内容。最佳做法是什么？是否更好地使用数据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); 
});

来源

2017-01-03 Palaniichuk Dmytro

你为什么要重复操作（下一& PEV）的按钮包含在每一个阶段的部分。使新的部分称为.actions那么你可以把你的行动按钮，它们... 然后你就可以有data-target属性持有STEPNUMBER的价值，它需要去当点击...

而你需要每次点击时你想要用户移动下一个...

来源

2017-01-03 06:36:11

我使用不同的元素来通过所有结帐，包含部分中的所有下一个按钮应该是。 –

为此，我更新了我的答案，请检查 –

我将为您创建Codepen等待... –

结帐辐射进度条事件

回答

相关问题