在多个点击事件 JS 上触发事件

Question

我正在构建一个预订系统，我目前正在尝试将所有不同的步骤相互连接起来。我想通过“上一个”和“下一个”按钮将它们连接起来，在那里我实现了一个 switch 语句来计算点击次数并相应地隐藏/显示某个步骤。

但是，我意识到 switch 语句不再有意义，因为用户可能会比我设置的情况更多地点击上一个 和 下一个按钮。我在下面粘贴了我当前的代码，我知道一定有更短的方法，但我不确定如何连接这两个按钮以使其正常工作。

理想情况下，我需要在不同的点击时触发不同的事件。

HTML 代码：

<div class="bookingArea">
        <div id="bookingOverlay" class="overlay">
            <button id="bookBtn">Click to book!</button>
            <div class="overlay-content">
                <hr>
                <div class="bookingSteps">
                </div>
                <!-- AVAILABILITY -->
                <form class="availability step1">
                </form>
                <!-- buttons -->
                <button class="previous hide">Previous</button>
                <button class="next">Next</button>
                <!-- PERSONAL DATA -->
                <form class="personalData step2">
                </form>
                <!-- ORDER OVERVIEW -->
                <div class="orderOverview step3">
                </div>
                <!-- PAYMENT -->
                <form class="payment step4">
                </form>
                <!-- RECEIPT -->
                <div class="receipt step5">
                </div>
            </div>
        </div>
    </div>

JS代码：

// activate "next" btn
var counter = 0;

document.querySelector(".next").addEventListener('click', function () {

    document.querySelector(".previous").classList.remove("hide");

    switch (++counter) {
        case 1:
            document.querySelector(".availability").classList.add("step1");
            document.querySelector(".personalData").classList.remove("step2");
            return +counter;
        case 2:
            document.querySelector(".personalData").classList.add("step2");
            document.querySelector(".orderOverview").classList.remove("step3");
            return +counter;
        case 3:
            document.querySelector(".orderOverview").classList.add("step3");
            document.querySelector(".payment").classList.remove("step4");
            return +counter;
        case 4:
            document.querySelector(".payment").classList.add("step4");
            document.querySelector(".receipt").classList.remove("step5");
            return +counter;
    }
    counter = 0;
});

// activate "previous" btn
var counter = 0;

document.querySelector(".previous").addEventListener('click', function () {
    switch (++counter) {
        case 1:
            return +counter;
        case 2:
            document.querySelector(".availability").classList.remove("step1");
            document.querySelector(".personalData").classList.add("step2");
            console.log("2");
            return +counter;
        case 3:
            document.querySelector(".personalData").classList.remove("step2");
            document.querySelector(".orderOverview").classList.add("step3");
            console.log("3");
            return +counter;
        case 4:
            document.querySelector(".orderOverview").classList.remove("step3");
            document.querySelector(".payment").classList.add("step4");
            console.log("4");
            return +counter;
        case 5:
            document.querySelector(".payment").classList.remove("step4");
            document.querySelector(".receipt").classList.add("step5");
            console.log("5");
            return +counter;
    }
    counter = 0;
});

Answer 1

我想出了一个解决方案。思路如下：

1. 除了第一个表单外，我已将名为 show 的同一类添加到您的所有表单中，并通过添加 CSS 将 display: none; 设置为该类。
2. 然后在 1 到 5 之间增加或减少计数器，因为我们的总步数是 5。
3. 只需根据计数器添加或删除类show。

我添加了一些 cmets 以便更好地理解。看看下面的代码sn-p：

var counter = 1, step = "step";

document.querySelector(".next").addEventListener('click', function () {

    step = ".step" + counter;

    if (counter <= 5) {
        document.querySelector(step).classList.add("show");
    }

    counter++;

    if (counter > 5) {
        counter = 5;
    }

    step = ".step" + counter; // step is the class and we are appending counter with step so that it looks like the same class in the given class(like counter 1 means step1)
    //console.log(step);

    document.querySelector(step).classList.remove("show");
});

document.querySelector(".previous").addEventListener('click', function () {

    if (counter > 1) { // we don't want to remove the first step, it will always be shown
        step = ".step" + counter;
        //console.log(step);

        document.querySelector(step).classList.add("show");
    }

    counter--;

    if (counter < 1) {
        counter = 1;
    }


    step = ".step" + counter;

    document.querySelector(step).classList.remove("show");

});

.show {
    display: none;
}

<div class="bookingArea">
    <div id="bookingOverlay" class="overlay">
        <button id="bookBtn">Click to book!</button>
        <div class="overlay-content">
            <hr>
            <div class="bookingSteps">
            </div>
            <!-- AVAILABILITY -->
            <form class="availability step1">
                <h1>step1</h1>
            </form>
            <!-- buttons -->
            <button class="previous">Previous</button>
            <button class="next">Next</button>
            <!-- PERSONAL DATA -->
            <form class="personalData step2 show">
                <h1>step2</h1>
            </form>
            <!-- ORDER OVERVIEW -->
            <div class="orderOverview step3 show">
                <h1>step3</h1>
            </div>
            <!-- PAYMENT -->
            <form class="payment step4 show">
                <h1>step4</h1>
            </form>
            <!-- RECEIPT -->
            <div class="receipt step5 show">
                <h1>step5</h1>
            </div>
        </div>
    </div>
</div>