javascript - 满足最终条件时,我的 IF 语句停止运行
问题描述
我目前正在制定座位计划。用户应该能够选择最多 3 个可用的表。选择了 3 个表后,用户应该无法再选择。
目前,用户可以选择 4 个我不想要的表。Also, when 4 tables are selected, the user cannot unselect these tables any longer. 而当条件不满足时,用户可以取消选择表。
我尝试过的事情:
- 玩弄逻辑运算符。
- 将 if 语句放在函数中并使用 return
const availableTables = document.querySelectorAll('.available');
for (let index = 0; index < availableTables.length; index++) {
availableTables[index].onclick = () => {
if (document.getElementsByClassName('active').length <= 3) {
if (availableTables[index].classList.contains('active')) {
availableTables[index].classList.remove('active');
} else {
availableTables[index].classList.add('active');
}
}
}
}
.active {
background-color: #00ccbc;
}
.seating-plan {
height: 100%;
position: relative;
display: flex;
flex-direction: column;
padding: 12px;
border: solid 1px #e8ebeb;
}
.seating-plan .grey {
border-color: #d9d9d9 !important;
}
.seating-plan .till-door {
display: flex;
justify-content: space-between;
height: auto;
color: #a9a9a9;
}
.seating-plan #section-1 {
height: 10%;
display: flex;
justify-content: space-between;
align-items: center;
display: flex;
}
.seating-plan #section-2 {
height: 80%;
display: flex;
justify-content: space-between;
align-items: center;
}
.seating-plan #section-2 #section-2-left {
height: 100%;
width: 20%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
}
.seating-plan #section-2 #section-2-left .half-circle {
width: 35px;
height: 25px;
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border: solid 1px #00ccbc;
}
.seating-plan #section-2 #section-2-left .half-circle:nth-child(2) {
transform: rotate(180deg);
}
.seating-plan #section-2 #section-2-left .half-circle:nth-child(4) {
transform: rotate(180deg);
}
.seating-plan #section-2 #section-2-middle {
height: 100%;
width: 180px;
justify-content: space-evenly;
flex-wrap: wrap;
display: flex;
flex-direction: column;
}
.seating-plan #section-2 #section-2-middle .square-container {
display: flex;
justify-content: space-between;
}
.seating-plan #section-2 #section-2-right {
height: 100%;
width: 20%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-end;
}
.seating-plan #section-3 {
height: 10%;
align-items: center;
justify-content: center;
display: flex;
justify-content: space-between;
}
.seating-plan .square {
height: 35px;
width: 35px;
border: solid 1px #00ccbc;
}
.seating-plan .full-circle {
height: 35px;
width: 35px;
border-radius: 50%;
border: solid 1px #00ccbc;
}
<div class="seating-plan">
<div class="till-door">
<p>Till</p>
<p>Door</p>
</div>
<section id="section-1">
<div class="square available"></div>
<div class="square grey"></div>
<div class="square available"></div>
<div class="square available"></div>
</section>
<section id="section-2">
<div id="section-2-left">
<div class="half-circle available"></div>
<div class="half-circle grey"></div>
<div class="half-circle available"></div>
<div class="half-circle available"></div>
</div>
<div id="section-2-middle">
<div class="square-container">
<div class="square available"></div>
<div class="square available"></div>
<div class="square available"></div>
</div>
<div class="square-container">
<div class="square available"></div>
<div class="square available"></div>
<div class="square grey"></div>
</div>
<div class="square-container">
<div class="square grey"></div>
<div class="square available"></div>
<div class="square available"></div>
</div>
</div>
<div id="section-2-right">
<div class="full-circle available"></div>
<div class="full-circle available"></div>
<div class="full-circle available"></div>
<div class="full-circle available"></div>
</div>
</section>
<section id="section-3">
<div class="full-circle available"></div>
<div class="full-circle available"></div>
<div class="full-circle available"></div>
<div class="full-circle available"></div>
</section>
</div>
解决方案
您的代码能够选择 4 的问题是您正在检查的事实if (document.getElementsByClassName('active').length <= 3) {
是=
,如果我目前有 3 个或更少,请运行以下命令。这就是你得到 4 的方式,因为它允许它在 3 个事物当前处于活动状态时运行。
另一个问题是您不允许他们取消选择,因为如果选择太多,您不会让他们进入。因此,您需要从条件中取消选中。
const availableTables = document.querySelectorAll('.available');
for (let index = 0; index < availableTables.length; index++) {
availableTables[index].onclick = () => {
if (availableTables[index].classList.contains('active')) {
availableTables[index].classList.remove('active');
return;
}
if (document.getElementsByClassName('active').length < 3) {
availableTables[index].classList.add('active');
}
}
}
.active {
background-color: #00ccbc;
}
.seating-plan {
height: 100%;
position: relative;
display: flex;
flex-direction: column;
padding: 12px;
border: solid 1px #e8ebeb;
}
.seating-plan .grey {
border-color: #d9d9d9 !important;
}
.seating-plan .till-door {
display: flex;
justify-content: space-between;
height: auto;
color: #a9a9a9;
}
.seating-plan #section-1 {
height: 10%;
display: flex;
justify-content: space-between;
align-items: center;
display: flex;
}
.seating-plan #section-2 {
height: 80%;
display: flex;
justify-content: space-between;
align-items: center;
}
.seating-plan #section-2 #section-2-left {
height: 100%;
width: 20%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
}
.seating-plan #section-2 #section-2-left .half-circle {
width: 35px;
height: 25px;
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border: solid 1px #00ccbc;
}
.seating-plan #section-2 #section-2-left .half-circle:nth-child(2) {
transform: rotate(180deg);
}
.seating-plan #section-2 #section-2-left .half-circle:nth-child(4) {
transform: rotate(180deg);
}
.seating-plan #section-2 #section-2-middle {
height: 100%;
width: 180px;
justify-content: space-evenly;
flex-wrap: wrap;
display: flex;
flex-direction: column;
}
.seating-plan #section-2 #section-2-middle .square-container {
display: flex;
justify-content: space-between;
}
.seating-plan #section-2 #section-2-right {
height: 100%;
width: 20%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-end;
}
.seating-plan #section-3 {
height: 10%;
align-items: center;
justify-content: center;
display: flex;
justify-content: space-between;
}
.seating-plan .square {
height: 35px;
width: 35px;
border: solid 1px #00ccbc;
}
.seating-plan .full-circle {
height: 35px;
width: 35px;
border-radius: 50%;
border: solid 1px #00ccbc;
}
<div class="seating-plan">
<div class="till-door">
<p>Till</p>
<p>Door</p>
</div>
<section id="section-1">
<div class="square available"></div>
<div class="square grey"></div>
<div class="square available"></div>
<div class="square available"></div>
</section>
<section id="section-2">
<div id="section-2-left">
<div class="half-circle available"></div>
<div class="half-circle grey"></div>
<div class="half-circle available"></div>
<div class="half-circle available"></div>
</div>
<div id="section-2-middle">
<div class="square-container">
<div class="square available"></div>
<div class="square available"></div>
<div class="square available"></div>
</div>
<div class="square-container">
<div class="square available"></div>
<div class="square available"></div>
<div class="square grey"></div>
</div>
<div class="square-container">
<div class="square grey"></div>
<div class="square available"></div>
<div class="square available"></div>
</div>
</div>
<div id="section-2-right">
<div class="full-circle available"></div>
<div class="full-circle available"></div>
<div class="full-circle available"></div>
<div class="full-circle available"></div>
</div>
</section>
<section id="section-3">
<div class="full-circle available"></div>
<div class="full-circle available"></div>
<div class="full-circle available"></div>
<div class="full-circle available"></div>
</section>
</div>
您可以摆脱循环并使用事件委托。有了它,您可以检查点击了什么。我会检查它是否处于活动状态以及是否将其删除。如果不活动,我会查询活动表并查看有多少。如果少于 3 个,则添加该类。
const seatingPlan = document.querySelector(".seating-plan");
seatingPlan.addEventListener("click", function (evt) {
// find the table they clicked on
const clickedSpot = evt.target.closest('.available');
// if not avilable exit out
if (!clickedSpot) return;
// If the table was active, remove it
if (clickedSpot.classList.contains("active")) {
clickedSpot.classList.remove('active')
return;
}
// make sure they have not selected more than 3 before activating it
const currentSelected = seatingPlan.querySelectorAll(".active");
if (currentSelected.length < 3) {
clickedSpot.classList.add('active');
}
});
.active {
background-color: #00ccbc;
}
.seating-plan {
height: 100%;
position: relative;
display: flex;
flex-direction: column;
padding: 12px;
border: solid 1px #e8ebeb;
}
.seating-plan .grey {
border-color: #d9d9d9 !important;
}
.seating-plan .till-door {
display: flex;
justify-content: space-between;
height: auto;
color: #a9a9a9;
}
.seating-plan #section-1 {
height: 10%;
display: flex;
justify-content: space-between;
align-items: center;
display: flex;
}
.seating-plan #section-2 {
height: 80%;
display: flex;
justify-content: space-between;
align-items: center;
}
.seating-plan #section-2 #section-2-left {
height: 100%;
width: 20%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
}
.seating-plan #section-2 #section-2-left .half-circle {
width: 35px;
height: 25px;
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border: solid 1px #00ccbc;
}
.seating-plan #section-2 #section-2-left .half-circle:nth-child(2) {
transform: rotate(180deg);
}
.seating-plan #section-2 #section-2-left .half-circle:nth-child(4) {
transform: rotate(180deg);
}
.seating-plan #section-2 #section-2-middle {
height: 100%;
width: 180px;
justify-content: space-evenly;
flex-wrap: wrap;
display: flex;
flex-direction: column;
}
.seating-plan #section-2 #section-2-middle .square-container {
display: flex;
justify-content: space-between;
}
.seating-plan #section-2 #section-2-right {
height: 100%;
width: 20%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-end;
}
.seating-plan #section-3 {
height: 10%;
align-items: center;
justify-content: center;
display: flex;
justify-content: space-between;
}
.seating-plan .square {
height: 35px;
width: 35px;
border: solid 1px #00ccbc;
}
.seating-plan .full-circle {
height: 35px;
width: 35px;
border-radius: 50%;
border: solid 1px #00ccbc;
}
<div class="seating-plan">
<div class="till-door">
<p>Till</p>
<p>Door</p>
</div>
<section id="section-1">
<div class="square available"></div>
<div class="square grey"></div>
<div class="square available"></div>
<div class="square available"></div>
</section>
<section id="section-2">
<div id="section-2-left">
<div class="half-circle available"></div>
<div class="half-circle grey"></div>
<div class="half-circle available"></div>
<div class="half-circle available"></div>
</div>
<div id="section-2-middle">
<div class="square-container">
<div class="square available"></div>
<div class="square available"></div>
<div class="square available"></div>
</div>
<div class="square-container">
<div class="square available"></div>
<div class="square available"></div>
<div class="square grey"></div>
</div>
<div class="square-container">
<div class="square grey"></div>
<div class="square available"></div>
<div class="square available"></div>
</div>
</div>
<div id="section-2-right">
<div class="full-circle available"></div>
<div class="full-circle available"></div>
<div class="full-circle available"></div>
<div class="full-circle available"></div>
</div>
</section>
<section id="section-3">
<div class="full-circle available"></div>
<div class="full-circle available"></div>
<div class="full-circle available"></div>
<div class="full-circle available"></div>
</section>
</div>
推荐阅读
- python-3.x - 如何在docker文件中使用python文件路径并将python程序的日志写入ubuntu上的/var/log文件?
- jquery - 滚动上的收缩菜单在“收缩点”上闪烁
- azure-data-explorer - 在 UI 中进行 Kusto 分组
- reactjs - React中路由器中的条件类名
- python - 使用 tensorflow 2 执行矩阵分解的简单方法
- javascript - 部分屏蔽电子邮件地址 - javascript
- sql - 将多个入口实例合并为一个,将差异合并为数组
- android - 更新到 Android 11 后 Admob 中出现严格的安全 Cookie 策略错误
- flutter - 在构建期间调用 setState() 或 markNeedsBuild()。调用原生广告时
- python - Python中的秒表函数