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。