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块之间滑动的功能。可能是我需要添加简单的滑块？像浮油或猫头鹰，但我不知道它是否正确

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>

希望这有帮助

如何制作简单的3步结账部分，如测验

1 个答案: