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

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'),&nbsp; &nbsp; &nbsp; countArr = new Array(items.length);/** loop through the elements and add "mouseup" listener (to ensure catching both left and right clicks) for each element&nbsp; **/&nbsp;/**&nbsp;* el: the current element from the ".item" elements collection* i: the index of that elemnt in the collection**/items.forEach((el, i) => {&nbsp; countArr[i] = 0; /** initialize each array element with 0 so we can count later (new Array puts "undefined" as the array elements values) **/&nbsp;&nbsp;&nbsp; /** add the "mouseup" listener **/&nbsp; el.addEventListener('mouseup', e => {&nbsp; &nbsp; 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) **/&nbsp; &nbsp; if(e.which === 1) countArr[i]++; /** left click **/&nbsp; &nbsp; else if(e.which === 3) countArr[i]--; /** right click **/&nbsp; &nbsp; 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 **/&nbsp; });});/** basic styling for the demo **/.item {&nbsp; display: inline-block;&nbsp; margin: 15px 0;&nbsp; padding: 8px;&nbsp; border: 2px solid teal;&nbsp; user-select: none;}.item .count {&nbsp; display: inline-block;&nbsp; background-color: #181818;&nbsp; color: #fff;&nbsp; font-size: 1.2rem;&nbsp; font-weight: bold;&nbsp; padding: 8px;&nbsp; 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&nbsp;.points").innerHTML&nbsp;=&nbsp;counter;和e.target.children[0].innerHTML&nbsp;=&nbsp;counter;然后你会遇到另一个问题，那就是你的计数器是全局的并且对所有按钮都是通用的。因此，您将不得不使用哈希图（JS 对象）而不是单个整数&nbsp;countervar&nbsp;counter&nbsp;=&nbsp;{};