满足最终条件时，我的 IF 语句停止运行

Question

我目前正在制定座位计划。用户应该能够选择最多 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>

Answer 1

您的代码能够选择 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>