亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何將 ID 存儲在數組中,同時顯示按下的按鈕?

如何將 ID 存儲在數組中,同時顯示按下的按鈕?

繁花如伊 2023-07-06 10:08:51
我對如何在按下按鈕時存儲或刪除數組上的多個 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;}
查看完整描述

1 回答

?
jeck貓

TA貢獻1909條經驗 獲得超7個贊

我只設法顯示第一個按鈕的控制臺日志。


您應該使用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>

我現在得到這樣的東西:

http://img1.sycdn.imooc.com//64a622740001bdaa06410210.jpg


查看完整回答
反對 回復 2023-07-06
  • 1 回答
  • 0 關注
  • 128 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號