javascript - 如何制作简单的 3 步结帐部分，例如测验

Question

你好，祝你有愉快的一天!

我想用后退按钮创建简单的逐步元素。

我有下一个标记

<div class="checkout">
    <div class="checkout-step">
        <div class="content">This is step 1</div>
        <div class="button-prev-step">Previous step</div>
        <div class="button-next-step">Next step</div>
    </div>
    <div class="checkout-step">
        <div class="content">This is step 2</div>
        <div class="button-prev-step">Previous step</div>
        <div class="button-next-step">Next step</div>
    </div>
    <div class="checkout-step">
        <div class="content">This is step 3</div>
        <div class="button-prev-step">Previous step</div>
        <div class="button-next-step">Next step</div>
    </div>
</div>

JS(它不是完整的代码，只是现有代码的一部分，我不完全明白我是怎么做到的)

var checkoutStepCounter = 0;
var checkoutStepLength = $('.checkout-step').length;
$('.button-next-step').click(function() {
    checkoutStepCounter++;
    if( checkoutStepLength < checkoutStepCounter ) {
        $(this).find('.checkout-step').hide();
        $(this).find('.checkout-step').next('.checkout-step').show();
    }
});
$('.button-prev-step').click(function() {
    checkoutStepCounter--;
    if( checkoutStepLength < checkoutStepCounter ) {
        $(this).find('.checkout-step').hide();
        $(this).find('.checkout-step').prev('.checkout-step').show();
    }
});

CSS:

.button-prev-step, .button-next-step {  display: block; width: 100px; height: 20px; background: red; cursor: pointer; }
.checkout-step { display: none; }

https://codepen.io/Frunky/pen/yKNMOM

如何制作函数nextStep和prevStep？结果我想在各部分之间滑动，并且总的来说 - 将填充的数据发送到后端。现在我需要添加在 .checkout-step block 之间滑动的功能。可能我需要添加简单的 slider ？像 slick 或 owl，但我不知道这样对不对

Answer 1

向您展示下一个和上一个按钮工作情况的简单代码片段。您可以做更多研究并根据您的要求添加所需的动画(幻灯片、淡入淡出等)。

var checkoutSteps = 3;
var currentStep = 1;

$('.button-next-step').click(function() {
    if(currentStep < checkoutSteps){
    $(".checkout-step-"+currentStep+"").hide();
    currentStep++;
    $(".checkout-step-"+currentStep+"").show();
    }
});
$('.button-prev-step').click(function() {
    if(currentStep > 1){
    $(".checkout-step-"+currentStep+"").hide();
    currentStep--;
    $(".checkout-step-"+currentStep+"").show();
    }
});

.button-prev-step, .button-next-step {  display: inline-block; width: 100px; height: 20px; background: red; cursor: pointer; }
.checkout-step { 
width: 300px;
height: 300px;
border: 1px solid #000;
display: none; 
}
.checkout-step-1{
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkout">
    <div class="checkout-step checkout-step-1">
        <div class="content">This is step 1</div>
        <div class="button-prev-step">Previous step</div>
        <div class="button-next-step">Next step</div>
    </div>
    <div class="checkout-step checkout-step-2">
        <div class="content">This is step 2</div>
        <div class="button-prev-step">Previous step</div>
        <div class="button-next-step">Next step</div>
    </div>
    <div class="checkout-step checkout-step-3">
        <div class="content">This is step 3</div>
        <div class="button-prev-step">Previous step</div>
        <div class="button-next-step">Next step</div>
    </div>
</div>

希望对你有帮助