如何使 function 适用于 javascript 中具有相同类的多个 div？

Question

I've been trying to make a web-based tallying-application using javascript.我一直在尝试使用 javascript 制作一个基于 Web 的计数应用程序。 I got it to work, but only for the first instance of a class (eg first tallying-element).我让它工作，但仅适用于 class 的第一个实例（例如第一个计数元素）。

How do I make the function work for multiple the subsequent instances of the tallying-elements?如何使 function 适用于计数元素的多个后续实例？

Also, I'm using Bootstrap v5.1.3 for the css, but did not add the lengthy code.另外，我为 css 使用 Bootstrap v5.1.3，但没有添加冗长的代码。

Your help is greatly appreciated!非常感谢您的帮助！

 let add = document.querySelector(".add"); let minus = document.querySelector(".minus"); let reset = document.querySelector(".reset"); let counter = document.querySelector(".counter"); add.addEventListener('click', addCounter); minus.addEventListener('click', minusCounter); reset.addEventListener('click', resetCounter); function addCounter(item) { counter_num = counter.innerHTML counter.innerHTML = parseInt(counter_num) + 1 } function minusCounter(){ counter_num = counter.innerHTML if (counter_num == 0){ return false } counter.innerHTML = parseInt(counter_num) - 1 } function resetCounter(){ if (counter.innerHTML == 0){ return false } if (confirm("Weet je zeker dat je de telling wilt resetten?") == true){ counter.innerHTML = 0; resetCounter = "De telling is gereset!" } else {} }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devide-width". initial-scale="1.0"> <link rel="stylesheet" href="bootstrap.min.css"> <title>Turf-app geadresseerd voorschrijven</title> <style>:counter{color;white: font-size; 25px: border-radius; 10%:max-width;50px.}:tally_container{background-color;lightgrey: border-radius; 10px: padding;20px.}:add{width; 38px: height; 38px.}:minus{width; 38px: height; 38px.}:title-text{color; white.}:counter2{color;white: font-size; 25px: border-radius; 10%:max-width;50px.} </style> </head> <body class="jumbotron bg-dark"> <h1 class="text-center mx-4 mt-4 mb-5 title-text">Turf-app geadresseerd voorschrijven</h1> <div class="container" id="1"> <div class="tally_container mt-3 mb-3" name="tally-element"> <div class="vraag-container mb-3"> <h3>Patiënten zonder recept</h3> </div> <div class="counter-div text-center"> <div class="mx-2 text-center mb-2 counter bg-dark">0</div> </div> <div class="buttons"> <button class="btn btn-success mx-2 add">+</button> <button class="btn btn-danger mx-2 minus">-</button> <br> <button class="btn btn-primary mx-3 mt-4 reset">Reset</button> </div> </div> </div> <div class="container" id="2"> <div class="tally_container mt-3 mb-3" name="tally-element"> <div class="vraag-container mb-3"> <h3>No-shows</h3> </div> <div class="counter-div text-center"> <div class="mx-2 text-center mb-2 counter bg-dark">0</div> </div> <div class="buttons"> <button class="btn btn-success mx-2 add">+</button> <button class="btn btn-danger mx-2 minus">-</button> <br> <button class="btn btn-primary mx-3 mt-4 reset">Reset</button> </div> </div> </div> <script src="app.js"></script> </body> </html>

Answer 1

The querySelector() method only returns the first element that matches the specified selectors. querySelector() 方法只返回与指定选择器匹配的第一个元素。 To return all the matches, use the querySelectorAll() method instead.要返回所有匹配项，请改用 querySelectorAll() 方法。

let add = document.querySelectorAll(".add");
...

add.forEach(elem => elem.addEventListener('click', addCounter));

Answer 2

With some help, I managed to fix it.在一些帮助下，我设法修复了它。 Every time a button is clicked, the closest '.counter' should be grabbed.每次单击按钮时，都应抓取最近的“.counter”。 See code.见代码。

 let add = document.querySelectorAll(".add"); let minus = document.querySelectorAll(".minus"); let reset = document.querySelectorAll(".reset"); add.forEach(elem =>elem.addEventListener('click', addCounter)); minus.forEach(elem =>elem.addEventListener('click', minusCounter)); reset.forEach(elem=> elem.addEventListener('click', resetCounter)); function addCounter(elem) { let counter = elem.target.closest(".container").querySelector(".counter") counter_num = counter.innerHTML counter.innerHTML = parseInt(counter_num) + 1 } function minusCounter(elem){ let counter = elem.target.closest(".container").querySelector(".counter") counter_num = counter.innerHTML if (counter_num == 0){ return false } counter.innerHTML = parseInt(counter_num) - 1 } function resetCounter(elem){ let counter = elem.target.closest(".container").querySelector(".counter") if (counter.innerHTML == 0){ return false } if (confirm("Weet je zeker dat je de telling wilt resetten?") == true){ counter.innerHTML = 0; resetCounter = "De telling is gereset!" } else {} }

如何使 function 适用于 javascript 中具有相同类的多个 div？

问题描述

2 个解决方案

解决方案1
0 2021-12-22 11:29:32

解决方案2
0 2021-12-24 16:34:18

如何使 function 适用于 javascript 中具有相同类的多个 div？

问题描述

2 个解决方案

解决方案1 0 2021-12-22 11:29:32

解决方案2 0 2021-12-24 16:34:18

解决方案1
0 2021-12-22 11:29:32

解决方案2
0 2021-12-24 16:34:18