时间戳

首页 > 解决方案 > 如何将计数器添加到具有同一类的多个元素

javascript - 如何将计数器添加到具有同一类的多个元素

问题描述

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

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

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

如果您查看 HTML 代码，您会看到我将 HTML 设置为具有类“item”的 div，然后我将另一个 div 嵌套在具有类“points”的“item”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 事件侦听器附加到每个具有“项目”类的 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 代码从 Moz 页面上的 MouseEvents .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 的一些指导下工作。我最终记录了“点”的 HTML 值，递增该值，然后将新值添加回 innerHTML：https ://codepen.io/jjchrisdiehl/pen/JgXzKe

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

标签： javascript

解决方案

您需要访问与单击的元素相对应的 div。

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

您可以使用e.target访问被单击的元素，并且由于您需要的是该元素的唯一子元素，因此您可以替换

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

和

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

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

因此，您将不得不使用哈希图（JS 对象）而不是单个整数counter

var counter = {};

推荐阅读