Vanilla JS选中div下多类按钮统计点击次数触发遮罩问题咨询

• 选择多类元素：使用querySelectorAll配合逗号分隔的CSS选择器.testButton, .incButton，可一次性匹配所有符合两个类名条件的按钮
• 批量绑定事件：遍历querySelectorAll返回的节点集合，给每一个按钮都绑定点击计数逻辑，避免只给第一个元素生效的问题
• 计数逻辑保持全局累加，达到2次时直接显示遮罩即可

<style>
    #winOverlay {
        position: fixed;
        z-index: 200;
        width: 100%;
        height: 100%;
        background-color: red;
        top: 0;
        left: 0;
    }
</style>

<div id="winOverlay" style="display:none"></div>

<div id="buttonContainer">
    <button class="testButton">1</button>
    <button class="incButton">2</button>
    <button class="testButton">3</button>
    <button class="incButton">4</button>
    <button class="testButton">5</button>
</div>


<script>
    var count = 0;
    // 获取所有符合条件的按钮
    var btns = document.getElementById("buttonContainer").querySelectorAll(".testButton, .incButton");
    // 遍历所有按钮绑定点击事件
    btns.forEach(function(btn) {
        btn.onclick = function () {
            count++;
            if (count == 2) {
                document.getElementById('winOverlay').style.display = "block";
            }
        }
    })
</script>

兼容补充 #

如果需要适配IE等不支持NodeList.forEach的旧浏览器，可以将遍历部分替换为普通for循环：

for(var i = 0; i < btns.length; i++) {
    btns[i].onclick = function () {
        count++;
        if (count == 2) {
            document.getElementById('winOverlay').style.display = "block";
        }
    }
}

内容的提问来源于stack exchange，提问作者truman.wang