如何使 function 適用於 javascript 中具有相同類的多個 div？
[英]How to make a function work for multiple div's with the same classes in javascript?
問題描述
我一直在嘗試使用 javascript 制作一個基於 Web 的計數應用程序。 我讓它工作，但僅適用於 class 的第一個實例（例如第一個計數元素）。
如何使 function 適用於計數元素的多個后續實例？
另外，我為 css 使用 Bootstrap v5.1.3，但沒有添加冗長的代碼。
非常感謝您的幫助！
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>
2 個解決方案
解決方案1
0 2021-12-22 11:29:32
querySelector() 方法只返回與指定選擇器匹配的第一個元素。 要返回所有匹配項，請改用 querySelectorAll() 方法。
let add = document.querySelectorAll(".add");
...
add.forEach(elem => elem.addEventListener('click', addCounter));
解決方案2
0 2021-12-24 16:34:18
在一些幫助下，我設法修復了它。 每次單擊按鈕時，都應抓取最近的“.counter”。 見代碼。
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 {} }
如何使兩個相同的類對相同的 javascript function 以不同的方式工作？
[英]How do I make two identical classes work differently with the same javascript function?
如何使具有相同 class 的多個下拉菜單的單個 function 工作？
[英]How to make single function for multiple dropdowns with same class to work?
通過javascript函數使具有相同類的多個div同時工作
[英]Make multiple divs with same class work at same time through javascript function
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.