如何将 ID 存储在数组中，同时显示按下的按钮？

Question

我对如何在按下按钮时存储或删除数组上的多个 ID 存有疑问。此外，当按钮被按下时，它会出现动画，显示当前被按下，直到再次按下。也许它必须处理 DOM 操作，但我不理解如何做到这一点。在我的 HTML、CSS 和 JS 代码下方，控制台记录此操作： OBS：现在我只能显示第一个按钮的控制台日志。var sorteioController = (function() {  var selecao = function(id, howmany, value) {    this.id = id;    this.howmany = howmany;    this.valor = value;  }  //select element  var allItems = {    selec: []  }  //send info  return {    addItem: function(id, hm, val) {      var newItem;      if (data.allItems[id].length > 0) {        ID = data.allItems[type][data.allItems[type].length - 1].id + 1;      } else {        ID = 0;      }      data.allItems[type].push(newItem);      return newItem;    },  }})();var UIController = (function() {  return {    getinput: function() {      todosItens = document.querySelector('.btn_reservas').toggleAttribute;    }  };})();var controller = (function(sorteioCtrl, UICtrl) {  var ctrlAddItem = function() {    console.log('It worked, pressed id  = ' + this.id);  }  document.querySelector('.btn_reservas').addEventListener('click', ctrlAddItem);  document.addEventListener('keypress', function(event) {    if (event.keyCode === 13 || event.which === 13) {      ctrlAddItem();    }  });})(sorteioController, UIController);.lista ul li {  display: inline;}.lista ul li a {  display: block;  border: 2px solid #bfc0bf;  border-radius: 50%;  width: 100%;  line-height: 40px;  max-width: 75px;  height: auto;  font-weight: 700;  text-decoration: none;  display: inline;  box-sizing: border-box;  padding: 20px;  font-family: sans-serif;  font-size: 13px;  color: #ffffff;  background-color: rgb(85, 161, 108);  border-color: #212529;  margin-right: 50px;}.lista ul li a:hover {  color: #212529;  background-color: #ffffff;  font: bolder;  transition: all 600ms ease;}

Answer 1

我只设法显示第一个按钮的控制台日志。

您应该使用querySelectorAll并循环事件侦听器。因此替换以下内容：

document.querySelector('.btn_reservas').addEventListener('click', ctrlAddItem);

这样循环：

document.querySelectorAll(".btn_reservas").forEach(function () {

  this.addEventListener("click", ctrlAddItem);

});

并以这种方式更改ctrlAddItem函数并添加一些类：

var ctrlAddItem = function(e) {

  console.log('It worked, pressed id  = ' + e.target.id);

  e.target.classList.toggle("active");

}

工作片段

var sorteioController = (function() {

  var selecao = function(id, howmany, value) {

    this.id = id;

    this.howmany = howmany;

    this.valor = value;

  }

  //select element

  var allItems = {

    selec: []

  }

  //send info

  return {

    addItem: function(id, hm, val) {

      var newItem;

      if (data.allItems[id].length > 0) {

        ID = data.allItems[type][data.allItems[type].length - 1].id + 1;

      } else {

        ID = 0;

      }

      data.allItems[type].push(newItem);

      return newItem;

    },

  }

})();

var UIController = (function() {

  return {

    getinput: function() {

      todosItens = document.querySelector('.btn_reservas').toggleAttribute;

    }

  };

})();

var controller = (function(sorteioCtrl, UICtrl) {

  var ctrlAddItem = function(e) {

    console.log('It worked, pressed id  = ' + e.target.id);

    e.target.classList.toggle("active");

  }

  document.querySelectorAll(".btn_reservas").forEach(function () {

    this.addEventListener("click", ctrlAddItem);

  });

  document.addEventListener('keypress', function(event) {

    if (event.keyCode === 13 || event.which === 13) {

      ctrlAddItem();

    }

  });

})(sorteioController, UIController);

.lista ul li {

  display: inline;

}

.lista ul li a {

  display: block;

  border: 2px solid #bfc0bf;

  border-radius: 50%;

  width: 100%;

  line-height: 40px;

  max-width: 75px;

  height: auto;

  font-weight: 700;

  text-decoration: none;

  display: inline;

  box-sizing: border-box;

  padding: 20px;

  font-family: sans-serif;

  font-size: 13px;

  color: #ffffff;

  background-color: rgb(85, 161, 108);

  border-color: #212529;

  margin-right: 50px;

}

.lista ul li a:hover {

  color: #212529;

  background-color: #ffffff;

  font: bolder;

  transition: all 600ms ease;

}

.lista ul li a.active {

  background-color: #f90;

}

<div class="lista">

  <ul>

    <li>

      <a href="#" id="00" class="btn_reservas" data-original-title="test">01</a>

    </li>

    <li>

      <a href="#" id="01" class="btn_reservas" data-original-title="test">02</a>

    </li>

    <li>

      <a href="#" id="02" class="btn_reservas" data-original-title="test">03</a>

    </li>

    <li>

      <a href="#" id="03" class="btn_reservas" data-original-title="test">04</a>

    </li>

    <li>

      <a href="#" id="04" class="btn_reservas" data-original-title="test">05</a>

    </li>

  </ul>

</div>

我现在得到这样的东西：