Question

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

页面中有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>

请帮助任何人。

Answer 1

你的JS逻辑过于复杂。您只需选择带有active类的按钮，然后从返回的jQuery对象中获取length。

$('.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>

想要使用jquery

1 个答案: