Question

我有以下代码：

＆＃13;

$(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
         });
});

＆＃13;

<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>

＆＃13;

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

更新：

正如Charlie 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

来自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 3

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

data-answer-1变为data-answer1并尝试检索所述属性（因为它无法将其归一化回data-answer-1），当然这不会返回data-未定义。任何data个属性都包含多个短划线并且没有正确地降级，因为它们在实际被检索之前变成了驼峰，因此无法通过jQuery data-方法获得。这包括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.属性，这些属性在第二个破折号后不会以字母开头。

基本上，jQuery会：

ExpandBar

根据此issue，已在3.0.0版本上修复此问题。这是修复它的commit。

Answer 4

Jquery在版本高于1的数据属性中只允许一个"-"。您的代码适用于所有JQuery 1.x版本。

Answer 5

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

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

5 个答案: