我的網頁中有三個框，每個框包括一個 按鈕、一個 - 按鈕和一個預分配值為 0 的跨度。我希望當我點擊 或 - 按鈕時，跨度的值會增加或減少一個根據點擊 或-的次數。但我的代碼不能很好地作業。我該怎么辦 ？謝謝。
<div class="box">
<button class="minus-btn" type="button">-</button>
<span class="display-num">0</span>
<button class="plus-btn" type="button"> </button>
</div>
<div class="box">
<button class="minus-btn" type="button">-</button>
<span class="display-num">0</span>
<button class="plus-btn" type="button"> </button>
</div>
<div class="box">
<button class="minus-btn" type="button">-</button>
<span class="display-num">0</span>
<button class="plus-btn" type="button"> </button>
</div>
function $(query) {
return document.querySelector(query);
}
function $All(query) {
return document.querySelectorAll(query);
}
const box = $All('.box');
const plusBtn = $All('.plus-btn');
const minusBtn = $All('.minus-btn');
const displayNum = $All('.display-num');
box.forEach((e) => {
e.addEventListener('click', (el) => {
if (el.target.classList.contains('plus-btn')) {
let num = 0;
displayNum.forEach((e) => {
e.innerHTML = num ;
})
} else if (el.target.classList.contains('minus-btn')) {
let num = 0;
displayNum.forEach((e) => {
e.innerHTML = num--;
})
}
}, false)
})
uj5u.com熱心網友回復：
對按下的實際按鈕做出反應可能更容易，而不是檢查框等，請嘗試以下操作：
plusBtn.forEach((e, idx) => {
e.addEventListener(
'click',
(el) => {
calcIt(displayNum[idx], 1);
},
false
);
});
minusBtn.forEach((e, idx) => {
e.addEventListener(
'click',
(el) => {
calcIt(displayNum[idx], -1);
},
false
);
});
function calcIt(element, value) {
var num = element.innerHTML;
element.innerHTML = ( num) value;
}
洗掉塊：
box.forEach((e) => {
e.addEventListener('click', (el) => {
if (el.target.classList.contains('plus-btn')) {
let num = 0;
displayNum.forEach((e) => {
e.innerHTML = num ;
})
} else if (el.target.classList.contains('minus-btn')) {
let num = 0;
displayNum.forEach((e) => {
e.innerHTML = num--;
})
}
}, false)
})
Stackblitz：https ://jquery-rfrzsp.stackblitz.io
( https://stackblitz.com/edit/jquery-rfrzsp )
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/318156.html
標籤：javascript html dom 网络前端