parseInt返回NaN，而它应该是一个数字

parseInt returns NaN when it should be a number?

本文关键字：数字 一个 NaN 返回 parseInt      更新时间：2023-09-26

我有以下代码:

$(function() {
    var $form = $("#pollAnswers"),
        $radioOptions = $form.find("input[type='radio']"),
        $existingDataWrapper = $(".web-app-item-data"),
        $webAppItemName = $existingDataWrapper.data("item-name"),
        $formButton = $form.find("button");
    
        $radioOptions.on("change",function(){
    
          $formButton.removeAttr("disabled");
    
          var chosenField = $(this).data("field"), 
              answer_1 = parseInt($existingDataWrapper.data("answerswer-1")),
              answer_2 = parseInt($existingDataWrapper.data("answerswer-2")),
              answer_3 = parseInt($existingDataWrapper.data("answerswer-3"));
            
            console.log("1 =" + answer_1);
            console.log("2 =" + answer_2);
            console.log("3 =" + answer_3);
            
            //Additional code not related to question
         });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="web-app-item-data" data-item-name="Test" data-answer-1="0"  data-answer-2="0"  data-answer-3="0"></div>
<form id="pollAnswers">
    <div class="answerswers">
        <input type="radio" name="radioChoice" data-field="CAT_Custom_2"> Answer 1<br>
        <input type="radio" name="radioChoice" data-field="CAT_Custom_4"> Answer 2<br>
        <input type="radio" name="radioChoice" data-field="CAT_Custom_6"> Answer 3<br>
    </div>
<button type="submit" disabled>Submit</button>
</form>

当您运行代码时，您将在控制台中看到答案1,2和3都返回NaN。

:

正如Charlie H在评论中指出的那样，如果我删除parseInt，它将返回undefined。

我没有看到代码中的错误，为什么它不从div中提取数据属性值。

如何解决这个问题?

jQuery 2.1.3似乎不识别包含仅由数字组成的名称段的数据属性。例如，这些工作:

  • data-answer as .data()["answerswer"]
  • data-foo as .data()["foo"]
  • data-foo-bar as .data()["fooBar"]

  • data-answer-1

  • data-foo-bar-3

jQuery 3的表现更符合预期

来自jquery的数据函数似乎没有考虑到属性名称中有数字的属性。"number-1"不起作用，但"number-1"起作用。这可能会帮助您快速修复。

$(function() {
    var $form = $("#pollAnswers"),
        $radioOptions = $form.find("input[type='radio']"),
        $existingDataWrapper = $(".web-app-item-data"),
        $webAppItemName = $existingDataWrapper.data("item-name"),
        $formButton = $form.find("button");
    
        $radioOptions.on("change",function(){
    
          $formButton.removeAttr("disabled");
    
          var chosenField = $(this).data("field"), 
              answer_1 = parseInt($existingDataWrapper.data("answerswer-one")),
              answer_2 = parseInt($existingDataWrapper.data("answerswer-two")),
              answer_3 = parseInt($existingDataWrapper.data("answerswer-three"));
            console.log("1 =" + answer_1);
            console.log("2 =" + answer_2);
            console.log("3 =" + answer_3);
            
            //Additional code not related to question
         });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="web-app-item-data" data-item-name="Test" data-answer-one="0"  data-answer-two="0"  data-answer-three="0"></div>
<form id="pollAnswers">
    <div class="answerswers">
        <input type="radio" name="radioChoice" data-field="CAT_Custom_2"> Answer 1<br>
        <input type="radio" name="radioChoice" data-field="CAT_Custom_4"> Answer 2<br>
        <input type="radio" name="radioChoice" data-field="CAT_Custom_6"> Answer 3<br>
    </div>
<button type="submit" disabled>Submit</button>
</form>

在jQuery 3.0.0之前，jQuery尝试检索data-属性的其余部分作为camelCase。换句话说:

data-answer-1被骆驼化为data-answer1，并试图检索该属性(因为它无法将其规范化回data-answer-1)，当然没有，因此返回undefined。任何data-属性如果包含一个以上的划号并且没有被正确地骆驼化，将无法通过jQuery data方法获得，因为它们在实际被检索之前已经被骆驼化了。这包括不以第二个破折号后的字母开头的data-属性。

基本上，jQuery做:

var key = jQuery.camelCase(key);
//... some time later
var attrName = "data-" + key.replace(/[A-Z]/g, "-$1" ).toLowerCase();
// back to normal or is it...?
elem.getAttribute(attrName); //might not exist.

这个问题已经在3.0.0版本中修复了。下面是修复它的提交:

在高于1的版本中，Jquery只允许一个"-"在data属性中。您的代码可以很好地用于所有JQuery 1。x版本。

可以使用attr()函数读取属性。然而，正如其他人所建议的，jQuery不读取包含数字的属性名。

参见代码中的解决方案。

$(function() {
    var $form = $("#pollAnswers"),
        $radioOptions = $form.find("input[type='radio']"),
        $existingDataWrapper = $(".web-app-item-data"),
        $webAppItemName = $existingDataWrapper.data("item-name"),
        $formButton = $form.find("button");
        $radioOptions.on("change",function(){
          $formButton.removeAttr("disabled");
          var chosenField = $(this).data("field"), 
              answer_1 = parseInt($existingDataWrapper.attr("data-answer-1")),
              answer_2 = parseInt($existingDataWrapper.attr("data-answer-2")),
              answer_3 = parseInt($existingDataWrapper.attr("data-answer-3"));
            console.log("1 =" + answer_1);
            console.log("2 =" + answer_2);
            console.log("3 =" + answer_3);
            //Additional code not related to question
         });
});
相关文章：