我目前正在制定座位计划。用户应该能够选择最多 3 个可用表。选择了 3 个表后,用户应该不能再选择了。
目前,用户可以选择 4 个表,这是我不想要的。 Also, when 4 tables are selected, the user cannot unselect these tables any longer.而当条件不满足时,用户可以取消选择表。
我尝试过的事情:
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>
答案 0 :(得分:2)
您的代码无法选择 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>