所以我有一個簡單的事件監聽器，當我點擊一個復選框時它會更新我的價格。
但是，我看不到如何在取消選中復選框后重構我的邏輯以使其減去價格？
let items = 0;
document.addEventListener("click", (e) => {
if (e.target.matches("input[type=checkbox]")) {
items = e.target.value;
console.log(items);
document.getElementById("price").textContent = `Food Total: $${(
items / 100
).toFixed(2)}`;
}
});
到目前為止，這段代碼添加了我所有的復選框值，但是如果我繼續單擊并取消單擊它們，它們仍然會將值添加到無窮大
uj5u.com熱心網友回復：
我會將選中的框添加到 Set 中，并在單擊時從 Set 中添加/洗掉它們。檢查它們是否已經在集合中以確定您是否需要從總和中添加或減去。
const clickedCheckboxes = new Set();
let sum = 0;
const priceDiv = document.getElementById("price");
document.addEventListener("click", ({ target }) => {
if (!target.matches("input[type=checkbox]")) {
return;
}
if (clickedCheckboxes.has(target)) {
clickedCheckboxes.delete(target);
sum -= target.value;
} else {
clickedCheckboxes.add(target);
sum = Number(target.value);
}
priceDiv.textContent = `Food Total: $${(sum / 100).toFixed(2)}`;
});
uj5u.com熱心網友回復：
也許您可以在單擊復選框時添加一個“已選中”類并在再次單擊時將其洗掉？然后您可以使用該類而不是原始點擊事件。
uj5u.com熱心網友回復：
我認為復選框應該有一個簡單的布林值 .checked 是真還是假：https ://www.w3schools.com/jsref/prop_checkbox_checked.asp
如果 .checked === false，這可能允許您遞減
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/485354.html
上一篇：Javascript-如何根據資料值是否>0構建一個句子來顯示資料？
下一篇：如何在動態生成的按鈕中選擇跨度？