javascript中是否有任何方法可以为一个HTML元素单独操作一个函数？答案

【问题标题】：is there any method in javascript to operate a function singly for one HTML element?javascript中是否有任何方法可以为一个HTML元素单独操作一个函数？
【发布时间】：2021-09-28 08:05:58
【问题描述】：

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

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

【问题讨论】：

标签： javascript html dom web-frontend

【解决方案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)

【讨论】：