时间戳

首页 > 解决方案 > 想要使用 jquery 在页面中查找活动按钮的数量

jquery - 想要使用 jquery 在页面中查找活动按钮的数量

问题描述

当用户单击“继续”按钮时，我想在页面上找到活动按钮的数量。

页面中有 10 个按钮，其类为“btnp”

<button class="btnp">SELECT</button>//10 buttons are there in the page

继续按钮的代码：

<button type="button" class="continue-btn nextStepButton">
    Continue <i class="fa fa-arrow-right"></i>
</button>

为此，我正在使用代码：

<script>
    $(document).ready(function(){
      var gcnt = 0;
      $('.continue-btn').click(function(){
        getCnt( $( "btnp" ).toArray());//btnp is a class
        function getCnt( btng ) {
            for ( var i = 0; i < btng.length; i++ )
            {
                if ( $( btng[i] ).hasClass( "active" ) )
                {
                    gcnt= gcnt+1;
                }
            }
            console.log(gcnt);
        }
    });
  });
</script>

请帮助任何人。

标签： jquery

解决方案

您的 JS 逻辑非常复杂。active您可以简单地选择带有类的按钮并length从返回的 jQuery 对象中获取。

$('.btnp').click(function() {
  $(this).toggleClass('active');
});

$('.continue-btn').click(function() {
  var activeCount = $('.btnp.active').length;
  console.log(activeCount);
});
.active { color: #C00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btnp">SELECT</button>
<button class="btnp">SELECT</button>
<button class="btnp">SELECT</button>
<button class="btnp">SELECT</button>
<button class="btnp">SELECT</button>
<button class="btnp">SELECT</button>
<button class="btnp">SELECT</button>
<button class="btnp">SELECT</button>
<button class="btnp">SELECT</button>

<br /><br />

<button type="button" class="continue-btn nextStepButton">
  Continue <i class="fa fa-arrow-right"></i>
</button>

推荐阅读