jQuery- attr/value 不以数字形式检索值，而是以 NaN 形式检索答案

【问题标题】：jQuery- attr/value not retrieving a value as number but NaNjQuery- attr/value 不以数字形式检索值，而是以 NaN 形式检索
【发布时间】：2020-06-12 04:32:45
【问题描述】：

我正在尝试制作一个按钮，在单击时将值作为数字返回。但是它返回 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);


    });

【问题讨论】：

标签： jquery attr

【解决方案1】：

你好像忘记写按钮的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>

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

【讨论】：

【解决方案2】：

`$( document ).ready()`

在尝试直接在$(document).ready 中获取按钮属性value 时，您只需使用按钮ID #button-1 来引用按钮，而不是使用this。正如this 内的$(document).ready 是指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>

【讨论】：