Javascript 在多个单击事件上触发事件

我正在建立一个预订系统，目前我正在尝试将所有不同的步骤相互连接起来。我想通过“上一步”和“下一步”按钮将它们连接起来，在这里我实现了一个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>

---

我想出了一个解决办法。这些想法如下：

除了第一个表单之外，我已经在所有表单中添加了名为

show

的类，通过添加CSS，我设置了

display:none到该类

然后在1和5之间增加或减少计数器，因为我们的总步数是5

只需根据计数器添加或删除类

show

为了更好地理解，我添加了一些注释。请看下面的代码片段：

var计数器=1，step=“step”；
document.querySelector（“.next”）.addEventListener（'click'，函数（）{
步骤=“.step”+计数器；
如有需要（柜台5）{
计数器=5；
}
step=“.step”+counter；//step是类，我们用step附加计数器，使其看起来像给定类中的同一个类（像计数器1表示step1）
//控制台日志（步骤）；
document.querySelector（步骤）.classList.remove（“show”）；
});
document.querySelector（“.previous”）.addEventListener（'click'，函数（）{
如果（counter>1）{//我们不想删除第一步，它将始终显示
步骤=“.step”+计数器；
//控制台日志（步骤）；
document.querySelector（step.classList.add（“show”）；
}
计数器--；
如果（计数器<1）{
计数器=1；
}
步骤=“.step”+计数器；
document.querySelector（步骤）.classList.remove（“show”）；
});
.show{
显示：无；
}

点击预订！

步骤1
以前的
下一个
步骤二
步骤三
步骤四
步骤5
你也可以分享你的html吗？@ShahnawazHossan现在在帖子中：）你的代码看起来真的很乱，你想通过点击prev或next按钮来显示一个特定的字段，不是吗？@ShahnawazHossan是的，我意识到，我刚刚清理了它。是的，请看一下我的答案。首先，谢谢你花时间帮助我。我实现了你的代码，看起来按钮像我希望的那样工作，但是，当点击下一步时，“旧”步骤不会消失，反之亦然。基本上，这些步骤只是不断累积，这不是我们的意图。对不起，我以前可能没有具体说明。好的，明白了。你想在显示当前步骤的同时隐藏上一步，对吗？是的，这正是它的优点，非常感谢你，我非常感谢你的帮助！）@梅加内隆多诺，我的荣幸：）