javascript - 检索按钮 jquery 的值

Question

我有这个：

 <div class="cable-config">
            <span>Select Entries</span>
          
            <div class="cable-choose">
              <button id="Home" value="5.00">50 Entries<br>$5.00</button>
              <button value="10.00">100 Entries<br>$10.00</button>
              <button>250 Entries<br>$25.00</button>
              <button>500 Entries<br>$50.00</button>
            </div>
            <p>By entering, you agree to our Terms of Service, Official Rules, and Privacy Policy.</p>
          </div>
      </div>

      <script>
         var buttonValue = ""
          $('button').on('click', function(){
            $('button').removeClass('active_button');
            $(this).addClass('active_button');
            // var fired_button = $(this).val();
            //  alert(fired_button);
        });

        //Home button active on page load
        $(document).ready(function(){
            $('#Home').addClass('active_button');
        });

单击按钮时它会做什么，将其设置class为active_button.

现在我要做的是active_button在单击新按钮时获取类的值。如您所见，我尝试检索 的值active_button，但它返回undefined.我做错了什么？

function myfunction() {
  var valueOfButton = $('active_button').val();
  console.log(valueOfButton);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cable-config">
  <span>Select Entries</span>

  <div class="cable-choose">
    <button id="Home" value="5.00">50 Entries<br>$5.00</button>
    <button value="10.00">100 Entries<br>$10.00</button>
    <button>250 Entries<br>$25.00</button>
    <button>500 Entries<br>$50.00</button>
  </div>
  <p>By entering, you agree to our Terms of Service, Official Rules, and Privacy Policy.</p>
</div>

<div class="product-price">
  <button onclick="myfunction()" class="cart-btn">Continue To Payment</button>
</div>

标签： javascripthtmljquery