JavaScript如何实现点击按钮仅操作对应HTML元素的独立计数功能？

问题原因 #

• 每次点击会遍历所有.display-num元素，导致三个容器的数值被同步修改，没有限定只修改当前点击按钮所属容器的数值
• 每次点击都将计数初始值设为0，没有读取当前span里已有的数值，无法实现累加/累减效果

修正后的JS代码 #

function $(query) {
    return document.querySelector(query);
}
function $All(query) {
    return document.querySelectorAll(query);
}
const box = $All('.box');

box.forEach((e) => {
    e.addEventListener('click', (el) => {
        // 仅获取当前点击的box内的数字展示元素
        const currentDisplay = e.querySelector('.display-num');
        // 读取当前数值并转为数字类型
        let num = parseInt(currentDisplay.innerHTML);
        if (el.target.classList.contains('plus-btn')) {
            currentDisplay.innerHTML = num + 1;
        } else if (el.target.classList.contains('minus-btn')) {
            // 如果需要限制数值不能为负，可改为 currentDisplay.innerHTML = Math.max(num - 1, 0)
            currentDisplay.innerHTML = num - 1;
        }
    }, false)
})

内容的提问来源于stack exchange，提问作者Matin