jQuery- attr/value 检索的不是数字值而是 NaN

Question

我正在尝试创建一个按钮，在单击时 returns 将值作为数字。然而它 returns NaN。谁能告诉我哪里出了问题？

         <div class="card-body">
            <button id="button-1" class="btn btn-primary number" value="1">
              <h1>1</h1>
            </button>

         </div>
--------------------------------------------------------------------------------------------------

        $(document).ready(function () {

           var userBtnValue = ($(this).attr("value"));
           userBtnValue = parseInt(userBtnValue);
           console.log(userBtnValue);


    });

Answer 1

`$( document ).ready()`

您只需要使用按钮 ID #button-1 来引用按钮，而不是在尝试获取 $(document).ready 中的按钮属性 value 时使用 this直接地。由于 $(document).ready 中的 this 指的是 document 而不是 ID 为 #button-1 的按钮：

$(document).ready(function() {
  var userBtnValue = $("#button-1").attr("value");
  userBtnValue = parseInt(userBtnValue);
  console.log(userBtnValue);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body">
  <button id="button-1" class="btn btn-primary number" value="1">
    <h1>1</h1>
  </button>
</div>

`.click()`

您的代码 $(this).attr("value") 只有在我们有该按钮的点击事件侦听器时才会起作用，因为在这种情况下 this 将始终引用点击按钮：

$(document).ready(function() {

  // Bind an event handler to the "click" JavaScript event,
  $("#button-1").click(function() {
    var userBtnValue = $(this).attr("value");
    userBtnValue = parseInt(userBtnValue);
    console.log(userBtnValue);
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body">
  <button id="button-1" class="btn btn-primary number" value="1">
    <h1>1</h1>
  </button>
</div>

Answer 2

你好像忘了给按钮写onclick函数

$(document).ready(function() {
  $('body').on('click', '#button-1', function() {
    var userBtnValue = ($(this).attr("value"));
    userBtnValue = parseInt(userBtnValue);
    console.log(userBtnValue);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="card-body">
  <button id="button-1" class="btn btn-primary number" value="1">
    <h1>1</h1>
  </button>
</div>

这将为您提供预期的结果。

jQuery- attr/value 检索的不是数字值而是 NaN

jQuery- attr/value not retrieving a value as number but NaN

jquery

attr

$( document ).ready()

.click()

`$( document ).ready()`

`.click()`