1 回答

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>
我現在得到這樣的東西:
添加回答
舉報