在多点击事件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即可

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

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>