如何使函数适用于javascript中具有相同类的多个div？答案

【问题标题】：How to make a function work for multiple div's with the same classes in javascript?如何使函数适用于javascript中具有相同类的多个div？
【发布时间】：2022-01-23 14:45:06
【问题描述】：

我一直在尝试使用 javascript 制作一个基于 Web 的计数应用程序。我让它工作，但仅适用于类的第一个实例（例如第一个计数元素）。

如何使该函数适用于计数元素的多个后续实例？

另外，我使用 Bootstrap v5.1.3 的 css，但没有添加冗长的代码。

非常感谢您的帮助！

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>

【问题讨论】：

标签： javascript html

【解决方案1】：

querySelector() 方法只返回匹配指定选择器的第一个元素。要返回所有匹配项，请改用 querySelectorAll() 方法。

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

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

【讨论】：

感谢您的回答。当我这样做时，添加被添加到计数器的第一个实例而不是第二个。有没有办法解决这个问题？
你应该在你的 addCounter() 函数中做某事来分隔每个计数器元素，这样你就可以使用相关的添加按钮单独添加它

【解决方案2】：

在一些帮助下，我设法修复了它。每次单击按钮时，都应抓取最近的“.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 {}
}

【讨论】：