parseInt当它应该是一个数字时返回NaN？

Question

我有以下代码：

$(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("answer-1")), 
 
       answer_2 = parseInt($existingDataWrapper.data("answer-2")), 
 
       answer_3 = parseInt($existingDataWrapper.data("answer-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="answers"> 
 
     <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。

更新：

查理的H评论所指出的，如果我删除parseInt返回undefined。

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

我怎么解决这个问题呢？

Answer 1

的jQuery 2.1.3似乎并没有认识到，包含名称段仅由数字组成的数据 - 属性。例如，这些工作：

• data-answer作为.data()["answer"]
• data-foo为.data()["foo"]
• data-foo-bar为.data()["fooBar"]

这些不：

• 数据回答-1

• 数据FOO-BAR-3

jQuery的3出现预期的行为更。

Answer 2

您可以使用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 
     }); 
}); 

Answer 3

来自jquery的数据函数似乎没有考虑到属性名称中包含数字的属性。 “数字1”不起作用，但是“数字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("answer-one")), 
 
       answer_2 = parseInt($existingDataWrapper.data("answer-two")), 
 
       answer_3 = parseInt($existingDataWrapper.data("answer-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="answers"> 
 
     <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>

Answer 4

Jquery只允许在高于1的版本中的数据属性中使用一个"-"。对于所有JQuery 1.x版本，您的代码工作得很好。

Answer 5

在之前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按本issue。这是修复它的commit。