如何将 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 () {&nbsp; this.addEventListener("click", ctrlAddItem);});并以这种方式更改ctrlAddItem函数并添加一些类：var ctrlAddItem = function(e) {&nbsp; console.log('It worked, pressed id&nbsp; = ' + e.target.id);&nbsp; e.target.classList.toggle("active");}工作片段var sorteioController = (function() {&nbsp; var selecao = function(id, howmany, value) {&nbsp; &nbsp; this.id = id;&nbsp; &nbsp; this.howmany = howmany;&nbsp; &nbsp; this.valor = value;&nbsp; }&nbsp; //select element&nbsp; var allItems = {&nbsp; &nbsp; selec: []&nbsp; }&nbsp; //send info&nbsp; return {&nbsp; &nbsp; addItem: function(id, hm, val) {&nbsp; &nbsp; &nbsp; var newItem;&nbsp; &nbsp; &nbsp; if (data.allItems[id].length > 0) {&nbsp; &nbsp; &nbsp; &nbsp; ID = data.allItems[type][data.allItems[type].length - 1].id + 1;&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; ID = 0;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; data.allItems[type].push(newItem);&nbsp; &nbsp; &nbsp; return newItem;&nbsp; &nbsp; },&nbsp; }})();var UIController = (function() {&nbsp; return {&nbsp; &nbsp; getinput: function() {&nbsp; &nbsp; &nbsp; todosItens = document.querySelector('.btn_reservas').toggleAttribute;&nbsp; &nbsp; }&nbsp; };})();var controller = (function(sorteioCtrl, UICtrl) {&nbsp; var ctrlAddItem = function(e) {&nbsp; &nbsp; console.log('It worked, pressed id&nbsp; = ' + e.target.id);&nbsp; &nbsp; e.target.classList.toggle("active");&nbsp; }&nbsp; document.querySelectorAll(".btn_reservas").forEach(function () {&nbsp; &nbsp; this.addEventListener("click", ctrlAddItem);&nbsp; });&nbsp; document.addEventListener('keypress', function(event) {&nbsp; &nbsp; if (event.keyCode === 13 || event.which === 13) {&nbsp; &nbsp; &nbsp; ctrlAddItem();&nbsp; &nbsp; }&nbsp; });})(sorteioController, UIController);.lista ul li {&nbsp; display: inline;}.lista ul li a {&nbsp; display: block;&nbsp; border: 2px solid #bfc0bf;&nbsp; border-radius: 50%;&nbsp; width: 100%;&nbsp; line-height: 40px;&nbsp; max-width: 75px;&nbsp; height: auto;&nbsp; font-weight: 700;&nbsp; text-decoration: none;&nbsp; display: inline;&nbsp; box-sizing: border-box;&nbsp; padding: 20px;&nbsp; font-family: sans-serif;&nbsp; font-size: 13px;&nbsp; color: #ffffff;&nbsp; background-color: rgb(85, 161, 108);&nbsp; border-color: #212529;&nbsp; margin-right: 50px;}.lista ul li a:hover {&nbsp; color: #212529;&nbsp; background-color: #ffffff;&nbsp; font: bolder;&nbsp; transition: all 600ms ease;}.lista ul li a.active {&nbsp; background-color: #f90;}<div class="lista">&nbsp; <ul>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <a href="#" id="00" class="btn_reservas" data-original-title="test">01</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <a href="#" id="01" class="btn_reservas" data-original-title="test">02</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <a href="#" id="02" class="btn_reservas" data-original-title="test">03</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <a href="#" id="03" class="btn_reservas" data-original-title="test">04</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <a href="#" id="04" class="btn_reservas" data-original-title="test">05</a>&nbsp; &nbsp; </li>&nbsp; </ul></div>我现在得到这样的东西：