javascript - 只允许用户最多选择三个 block

Question

我有一段代码，它将事件监听器添加到多个按钮，当用户单击按钮时，一个类将应用于按钮容器。我如何限制这一点，以便用户最多只能选择三个按钮。下面的代码在一定程度上有效，当达到三个时，您将无法取消选择。谁能帮我实现

var blocks = document.querySelectorAll(".block");
var btn = document.querySelectorAll("button");
var total = 0;

for (let i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", function() {
    if (total < 3 && blocks[i].classList.contains("active")) {
      blocks[i].classList.remove("active");
      total--;
    } else if (total < 3 && !blocks[i].classList.contains("active")) {
      blocks[i].classList.add("active");
      total++;
    }
  });
}

.container{
  display:flex;
}
.block{
  padding: 50px;
  border:1px solid;
  max-width:
}
.block.active{
  background:grey;
}

<div class="container">
  <div class="block">
    <button>click</button>
  </div>
  <div class="block">
    <button>click</button>
  </div>
  <div class="block">
    <button>click</button>
  </div>
  <div class="block">
    <button>click</button>
  </div>
  
</div>

这个。

Answer 1

您只需删除此条件 total < 3 &&从你的第一个if 。如果元素已被选择，则所选元素的数量无关紧要。您只想取消选择它。

var blocks = document.querySelectorAll(".block");
var btn = document.querySelectorAll("button");
var total = 0;

for (let i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", function() {
    if (blocks[i].classList.contains("active")) {
      blocks[i].classList.remove("active");
      total--;
    } else if (total < 3 && !blocks[i].classList.contains("active")) {
      blocks[i].classList.add("active");
      total++;
    }
  });
}

.container{
  display:flex;
}
.block{
  padding: 50px;
  border:1px solid;
  max-width:
}
.block.active{
  background:grey;
}

<div class="container">
  <div class="block">
    <button>click</button>
  </div>
  <div class="block">
    <button>click</button>
  </div>
  <div class="block">
    <button>click</button>
  </div>
  <div class="block">
    <button>click</button>
  </div>
  
</div>