点击CONTINUE按钮时，如何用jQuery统计激活的btnp类按钮数量？

让我们来修复你的代码，实现点击CONTINUE按钮时统计页面中激活状态（带有active类）的.btnp按钮数量。先看看你的代码里存在的几个关键问题：

原代码的问题点 #

• 选择器错误：你使用了$( "btnp" )来选择按钮，但btnp是class类名，jQuery选择class必须加上.前缀，正确的写法是$(".btnp")。
• 全局变量未重置：gcnt被定义为全局变量，每次点击CONTINUE按钮时不会重置为0，导致统计的数量会累加之前的结果，而不是当前激活的按钮数。
• 冗余的循环逻辑：其实不需要手动写循环来判断每个按钮是否有active类，jQuery可以直接筛选出带有active类的元素并获取长度。

修正后的代码 #

<script>
$(document).ready(function(){
    $('.continue-btn').click(function(){
        // 直接筛选带有active类的.btnp按钮，获取其数量
        const activeBtnCount = $(".btnp.active").length;
        console.log("激活的按钮数量：", activeBtnCount);
    });
});
</script>

如果你还是想保留自定义函数的写法，也可以这样修改：

<script>
$(document).ready(function(){
    $('.continue-btn').click(function(){
        function getActiveBtnCount() {
            let count = 0;
            // 正确选择所有.btnp按钮
            $(".btnp").each(function(){
                if($(this).hasClass("active")){
                    count++;
                }
            });
            return count;
        }
        const gcnt = getActiveBtnCount();
        console.log(gcnt);
    });
});
</script>

代码说明 #

1. 选择器修正：使用$(".btnp.active")可以直接选中所有同时拥有btnp和active类的按钮，调用.length就能直接得到数量，这是jQuery最简洁的写法。
2. 变量作用域优化：把计数变量放在点击事件或函数内部，每次点击都会重新初始化，避免累加旧数据。
3. 简化逻辑：利用jQuery的.each()方法遍历按钮，或者直接使用复合选择器筛选，比手动for循环更符合jQuery的语法习惯。

内容的提问来源于stack exchange，提问作者Suriya Karthikeyan