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

Question

我正在尝试重新创建 WoW 天赋计算器，如下所示 - https://classicdb.ch/?talent#h项目文件 - https://codepen.io/jjchrisdiehl/pen/gNQLgR这是一个帮助更好地理解 Javascript 的项目，因此请避免为此使用任何 jQuery 解决方法 - 谢谢。如果您查看 HTML 代码，您会看到我将 HTML 设置为带有“item”类的 div，然后我将另一个 div 嵌套在“item” div 内，带有“points”类。<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 代码是从 Moz 页面上的 MouseEvents .button 中窃取的。我的想法是使用开关来管理每个项目的单独计数器的加减点。

Answer 1

一种方法是选择.item元素，并创建一个array的.item长度（数.item在页面元素）单独存储用于每一个所述计数器。

这是一个演示，其中包含一些有用的评论：

/** selecting the elements with ".item" class and declaring an array to store each element counter separately **/

const items = document.querySelectorAll('.item'),

      countArr = new Array(items.length);

/** loop through the elements and add "mouseup" listener (to ensure catching both left and right clicks) for each element  **/

 

/** 

* el: the current element from the ".item" elements collection

* i: the index of that elemnt in the collection

**/

items.forEach((el, i) => {

  countArr[i] = 0; /** initialize each array element with 0 so we can count later (new Array puts "undefined" as the array elements values) **/

  

  /** add the "mouseup" listener **/

  el.addEventListener('mouseup', e => {

    let txtCount = el.querySelector('.count'); /** selecting the "span" that contains the counter from the current elemnt (don't forget that we're looping in ".item" elements collection) **/

    if(e.which === 1) countArr[i]++; /** left click **/

    else if(e.which === 3) countArr[i]--; /** right click **/

    txtCount.textContent = countArr[i]; /** update the "span" wih the calculated counter as left click adds 1 and right click removes 1 from the counter of each element **/

  });

});

/** basic styling for the demo **/

.item {

  display: inline-block;

  margin: 15px 0;

  padding: 8px;

  border: 2px solid teal;

  user-select: none;

}

.item .count {

  display: inline-block;

  background-color: #181818;

  color: #fff;

  font-size: 1.2rem;

  font-weight: bold;

  padding: 8px;

  border-radius: 4px;

}

<div class="item">counter = <span class="count">0</span></div>

<div class="item">counter = <span class="count">0</span></div>

<div class="item">counter = <span class="count">0</span></div>

Answer 2

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

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

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

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

和

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

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

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

var counter = {};