Javascript 签出径向进度条事件

我已经创建了带有一些动画和过渡的径向检出进度条。在按钮上添加了事件。但问题是我在结帐的每一步都有不同的内容。最佳实践是什么。使用数据属性是否更好。为了这个。对于某些签出，内容应该隐藏和显示

1.
T
地址
2.
A.
航运
3.
B
付款
4.
3.
总结
结帐内容1
下一步
下一步
结帐内容2
下一步
下一步
结帐内容3
下一步
下一步
结帐内容4
下一步
下一步
$（'.btn next'）。在（'click'，function（）上{
var currentStepNum=$（'#签出进度'）。数据（'current-step'）；
var nextStepNum=（currentStepNum+1）；
var currentStep=$（'.step.step-'+currentStepNum）；
var nextStep=$（'.step.step-'+nextStepNum）；
var progressBar=$（“#签出进度”）；
$（'.btn prev'）.removeClass（'disabled'）；
如果（currentStepNum==5）{
返回false；
}
如果（nextStepNum==5）{
$（this.addClass（'disabled'）；
}
//$（'.checkout progress'）.removeClass（'.step-'+currentStepNum）.addClass（'.step-'+currentStepNum+1））；
currentStep.removeClass（'active'）.addClass（'valid'）；
currentStep.find（'span'）.addClass（'不透明'）；
currentStep.find（'.step check'）.removeClass（'不透明'）；
下一步addClass（“活动”）；
progressBar.removeAttr（'class'）.addClass（'step-'+nextStepNum）.data（'current-step'，nextStepNum）；
});
$（'.btn prev'）。在（'click'，function（）上{
var currentStepNum=$（'#签出进度'）。数据（'current-step'）；
var prevStepNum=（currentStepNum-1）；
var currentStep=$（'.step.step-'+currentStepNum）；
var prevStep=$（'.step.step-'+prevStepNum）；
var progressBar=$（“#签出进度”）；
$（'.btn next'）.removeClass（'disabled'）；
如果（currentStepNum==1）{
返回false；
}
如果（prevStepNum==1）{
$（this.addClass（'disabled'）；
}
//$（'.checkout progress'）.removeClass（'.step-'+currentStepNum）.addClass（'.step-'+prevStepNum））；
currentStep.removeClass（“活动”）；
prevStep.find（'span'）.removeClass（'不透明'）；
prevStep.find（'.step check'）.addClass（'不透明'）；
prevStep.addClass（'active'）。removeClass（'valid'）；
progressBar.removeAttr（'class'）.addClass（'step-'+prevStepNum）.data（'current-step'，prevStepNum）；
});

为什么要在每个阶段重复包含部分中的操作（下一步和pev）按钮。创建一个名为.actions的新部分，然后您可以将您的操作按钮放置在它们的。。。 然后您可以拥有

数据目标

属性，该属性保存单击时需要转到的stepNumber的值

---

每次单击要用户下一步移动的对象时，都需要更改数据目标的属性。。。pev按钮也是一样…

我使用不同的元素来完成所有签出，Contain部分中的所有下一个按钮都应该是。可能是使用类似于$（this）.toggle（）的东西$（this.prev（）.hide（）$（this.next（）.show（）；

    <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);
});