制作100多个计数器的最有效方法是什么

Question

我想知道什么是放置可能超过100个计数器的最有效方法(比如https://mp-counter.netlify.app/)香草JS 中的杂货清单网站

我想添加一个功能，其中用户可以按"+"或"-"添加或减去他们想要的数量

例如-大米-0+KG如果我按+，它应该会增加数字，而-应该会减少的数字

Answer 1

下面是一个简短的片段，它将创建100个计数器和按钮来增加或减少它们的内容：

const cont=document.getElementById('container');
cont.addEventListener('click',ev=>{
if (ev.target.tagName!=="BUTTON") return;
let cntr=ev.target.parentNode.querySelector('span');
cntr.textContent = +cntr.textContent + (ev.target.textContent=="+"?1:-1)
});
cont.innerHTML=
[...Array(100).keys()].map(i=>
`<div><button>-</button><span>0</span><button>+</button> ${i+1}</div>`)
.join('n')

<div id="container"></div>

我使用"；委托事件监听"；以我将点击事件附加到父CCD_ 1的方式。只有当单击BUTTON时，事件函数才会执行某些操作：根据单击的按钮，它会将1或-1添加到相邻span元素的当前值中。

Answer 2

我不确定效率，但最简单的是数量和2个botton的元素。

const quantity = document.getElementById('quantity');
const plus = document.getElementById('plus');
const minus = document.getElementById('minus');
plus.addEventListener('click', evt => {
quantity.innerText = parseInt(quantity.innerText) + 1;
});
minus.addEventListener('click', evt => {
quantity.innerText = Math.max(0, parseInt(quantity.innerText) - 1);
});

<button id="minus">Minus</button>
<span id="quantity">0</span>
<button id="plus">Plus</button>

在这种情况下，我们一个接一个地加(减(，如果你想达到100+，你可以考虑实现一种更快的方法。