javascript - 如何向具有相同类的多个元素添加计数器

Question

我正在尝试重新创建此处所示的 WoW 天赋计算器 - https://classicdb.ch/?talent#h

项目文件 - https://codepen.io/jjchrisdiehl/pen/gNQLgR

这是一个帮助更好地理解 Javascript 的项目，因此请避免为此使用任何 jQuery 解决方法 - 谢谢。

如果您查看 HTML 代码，您会看到我将 HTML 设置为类为“item”的 div，然后我在类为“points”的“item”div 中嵌套了另一个 div。

<div class="item two nature_wispsplode button" data-max="5">
   <div class="points"></div>
</div>
<div class="item three fire_fireball button" data-max="3">
    <div class="points"></div>
</div>

想法是将一个名为 logMouseButton 的 Javascript 事件监听器附加到每个具有“item”类的 div。这将监听点击并记录它是鼠标左键还是右键单击。

/* Get item div element for addEventListener*/
let itemButton = document.getElementsByClassName("item");

/* Apply logMouseButton to every itemButton */
for (var i = 0; i < itemButton.length; i++) {
  itemButton[i].addEventListener("mouseup", logMouseButton, false);
}

现在 logMouseButton 代码是从 MouseEvents .button 上的 Moz 页面被破解的。我的想法是使用一个开关来管理向每个项目的单独计数器添加或减去点数。

• > https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button

/* Set Counter */
var counter = 0;

/* Add or subtract points based on button clicked */

function logMouseButton(e) {

/* Set the max number of clicks in points counter based off of data-max attribute */
  var maxPoints = this.getAttribute("data-max");

  if (typeof e === "object") {
    switch (e.button) {
      case 0:
        if (counter == 0 || counter < maxPoints) {
          counter = counter + 1;
        }
        document.querySelector(".item .points").innerHTML = counter;
       // alert(counter);
        break;

      case 1:
        log.textContent = "Middle button clicked.";
        break;

      case 2:
        if (counter > 0) {
          counter = counter - 1;
        }
        document.querySelector(".item .points").innerHTML = counter;
        break;
      default:
        log.textContent = `Unknown button code: ${btnCode}`;
    }
  }
}

左键单击递增，右键单击递减。正如您在我的 codepen 项目中看到的那样，右/左单击有效，但仅适用于一个项目。

我的问题是 - 我如何将其分别应用于每个项目，以便它们独立于其他项目管理自己的柜台？

谢谢!

注意 - 我设法让计数器在 klugjo 的指导下工作。我最终记录了“points”的 HTML 值，递增该值，然后将新值添加回 innerHTML:https://codepen.io/jjchrisdiehl/pen/JgXzKe

如果您对为什么这不是最好的方法或为什么另一种方法更好有任何见解，请告诉我!

Answer 1

您需要访问与被点击的元素对应的 div。

使用 document.querySelector(".item .points") 将始终选择 DOM 中的第一个元素。

您可以使用 e.target 访问被点击的元素，因为您需要的是该元素的唯一子元素，您可以替换

document.querySelector(".item .points").innerHTML = counter;

与

e.target.children[0].innerHTML = counter;

然后你会遇到另一个问题，那就是你的计数器是全局的并且对所有按钮都是通用的。

所以你必须使用散列图(JS 对象)而不是单个整数作为 counter

var counter = {};