JavaScript实现按钮最多选中3个且支持取消选中

需求 #

现有代码默认允许用户选中任意数量的选项按钮，需要新增规则：

• 最大可选数量上限为3个
• 用户可随时取消已选中的选项
• 任何时候选中数量都不能超过3个上限

原有完整代码 #

JavaScript 逻辑 #

var container = document.getElementById('my_dataviz');
var array = ["One", "Two", "Three", "Four", "Five", "Six",
  "Seven", "Eight", "Nine", "Ten"
]
let identifier = 0;

array.forEach(element => {
  var button = document.createElement("button");
  button.className = "btn";
  button.id = element;
  button.value = element;
  button.type = "button";
  var text = document.createTextNode(element);
  button.appendChild(text);
  container.appendChild(button);
});

let btn = document.getElementsByClassName("btn");

for (var i = 0; i < btn.length; i++) {
  (function(index) {
    btn[index].addEventListener("click", function() {
      console.log("Clicked Button: " + index);

      let isPresent = false;

      this.classList.forEach(function(e, i) {
        if (e == "button-focus") {
          isPresent = true;
        } else {
          isPresent = false;
        }
      });

      if (isPresent) {
        this.classList.remove("button-focus");
      } else {
        this.classList.add("button-focus");
      }
    });
  })(i);
}

CSS 样式 #

:root {
  --primary_orange: #fea501
}

;
.my_dataviz {
  width: auto;
  height: 500px;
  margin-top: 15px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
}

.my_dataviz button {
  font-size: 16px;
  display: flex;
  justify-content: center;
  width: 120px;
  background-color: Transparent;
  -webkit-tap-highlight-color: transparent;
  background-repeat: no-repeat;
  border: none;
  letter-spacing: 1.6px;
  margin: 10px;
  border: 1px solid transparent;
}

.my_dataviz button:hover {
  box-sizing: border-box;
  background-color: var(--primary_orange);
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 10px;
}

.btn.button-focus {
  background-color: var(--primary_orange);
  color: var(--dark);
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 10px;
}

.modal-footer .modal-btn {
  width: 80px;
  height: 25px;
  border-radius: 5px;
  align-items: center;
  Margin: 30px;
}

HTML 结构 #

<div class="modal-style">
  <div class="my_dataviz" id="my_dataviz">

  </div>
  <div class="modal-footer">
    <input class="modal-btn" type="button" value="Select" />
  </div>
</div>

原有计数逻辑的缺失点 #

你之前尝试写的计数片段如下：

var SelectCount=0;
if (SelectCount < 3) {
  SelectCount+=1;
}

这段代码缺三个核心逻辑，所以无法正常运行：

• 计数没有和选中状态联动：用户取消选中时没有对应SelectCount减1的逻辑，计数会只增不减，结果完全不准
• 判断逻辑没有绑定到点击事件：这段if判断只会在页面加载时执行1次，用户点击按钮时根本不会触发计数校验
• 原有选中状态判断有bug：遍历classList判断是否存在button-focus类的写法，会被遍历到的最后一个class覆盖判断结果，无法正确识别按钮当前是否选中，直接用原生classList.contains()方法判断更简单可靠。

修正后的JS逻辑 #

只需要修改按钮点击事件部分的代码即可，完整修正后的JS代码如下：

var container = document.getElementById('my_dataviz');
var array = ["One", "Two", "Three", "Four", "Five", "Six",
  "Seven", "Eight", "Nine", "Ten"
]
let identifier = 0;
// 初始化选中计数，定义最大可选数常量
let selectCount = 0;
const MAX_SELECT = 3;

array.forEach(element => {
  var button = document.createElement("button");
  button.className = "btn";
  button.id = element;
  button.value = element;
  button.type = "button";
  var text = document.createTextNode(element);
  button.appendChild(text);
  container.appendChild(button);
});

let btn = document.getElementsByClassName("btn");

for (var i = 0; i < btn.length; i++) {
  (function(index) {
    btn[index].addEventListener("click", function() {
      console.log("Clicked Button: " + index);
      // 修复选中状态判断逻辑
      let isSelected = this.classList.contains("button-focus");

      if (isSelected) {
        // 已选中状态：点击后取消选中，计数减1
        this.classList.remove("button-focus");
        selectCount--;
      } else {
        // 未选中状态：先判断是否达到上限，没到上限才允许选中
        if (selectCount < MAX_SELECT) {
          this.classList.add("button-focus");
          selectCount++;
        }
        // 达到上限时不做操作，自然无法选中新选项，需要提示的话可以在这里加提示逻辑
      }
    });
  })(i);
}

内容的提问来源于stack exchange，提问作者Yan