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

Question

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

但是，我意识到 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

我想出了一个解决办法。思路如下：

我已将相同的 class 命名为 show 添加到除第一个表单之外的所有表单中，并且通过添加 CSS，我已将 display: none; 设置为class.
然后在 1 和 5 之间增加或减少计数器，因为我们的总步数是 5。
根据计数器添加或删除classshow即可。

我添加了一些评论以便更好地理解。看看下面的代码片段：

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>

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

Firing off events on multiple click events JS

javascript

counter

switch-statement