javascript有没有方法可以单独操作一个HTML元素的函数？

Question

我的网页中有三个框，每个框包含一个 + 按钮、一个 - 按钮和一个预分配值为 0 的跨度。我希望当我点击 + 或 - 按钮时，span 的值会根据点击 + 或 - 的次数而增加或减少 1。但我的代码运行不正常。我应该怎么办？谢谢

<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)
})

Answer 1

可能更容易对实际按下的按钮做出反应，而不是选中复选框等，请尝试以下操作：

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)
})

堆栈闪电战： https://jquery-rfrzsp.stackblitz.io

(https://stackblitz.com/edit/jquery-rfrzsp)

javascript有没有方法可以单独操作一个HTML元素的函数？

is there any method in javascript to operate a function singly for one HTML element?

html

javascript

dom

web-frontend