为什么我的代码在尝试显示 Math.random 值时显示 NaN 而不是整数？答案

【问题标题】：Why is my code displaying NaN instead of an integer when attempting to display a Math.random value?为什么我的代码在尝试显示 Math.random 值时显示 NaN 而不是整数？
【发布时间】：2019-01-27 01:44:41
【问题描述】：

我正在尝试将 Math.random 函数附加到图像上的数据晶体属性。单击图像时，它将显示随机分配的数字到 HTML 页面，并在每次单击时继续添加自身。这是代码代码。

let currentScore = 0
let wins = 0
let losses = 0
let targetScore = 0


//function to assign number to crystals
$('#crystal1').append(`
data-crystal=${Math.floor(Math.random() * 25) }
`)

$('#crystal1').on('click', function (){
let crystalValue = $(this).attr('data-crystal')
crystalValue = parseInt(crystalValue)
crystalValue += currentScore
$('.scoreTotal').text(currentScore)
console.log(crystalValue)
})

另外，这里是相关的 HTML。

<div class="row">
        <h4 class="scoreTotal"></h4>
    </div>    
    </div>
    <div class="row">
        <img id="crystal1" src="./assets/images/crystal_1.png" alt="crystal 1">
        <img id="crystal2" src="./assets/images/crystal_2.png" alt="crystal 2">
        <img id="crystal3" src="./assets/images/crystal_3.png" alt="crystal 3">
        <img id="crystal4" src="./assets/images/crystal_4.png" alt="crystal 4">
    </div>
</div>

当我 console.log crystalValue 时，我得到 NaN，即使当我在我的开发工具中查看 HTML 时，数据水晶也被正确附加。我已经尽我所能修复它，但似乎无法纠正它。这是我在 Stack Overflow 上的第一篇文章，如果这是一个常见问题或过于简单，我很抱歉。

【问题讨论】：

你的代码在哪里？
我必须快速编辑，它现在就在那里

标签： javascript jquery append nan attr

【解决方案1】：

使用 jQuery 的 .data() 方法设置 data-attributes 的正确方法，而不是在元素末尾插入 HTML 的 jQuery 的 .append() 方法。

文档指出 jQuery 的 .data 方法将：

存储与匹配元素关联的任意数据，或在命名数据存储中返回匹配元素集中第一个元素的值。

let currentScore = 0
let wins = 0
let losses = 0
let targetScore = 0


//function to assign number to crystals
$('#crystal1').data('crystal', Math.floor(Math.random() * 25));
console.log($('#crystal1').data('crystal'));
$('#crystal1').on('click', function (){
let crystalValue = $(this).data('crystal');
currentScore++;
crystalValue += currentScore;
$('.scoreTotal').text(crystalValue);
})

html, body{
  padding: 10px;
}

img{
  display: inline-block;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="row">
        <h4 class="scoreTotal"></h4>
    </div>    
    <div class="row">
        <img id="crystal1" src="./assets/images/crystal_1.png" alt="crystal 1">
        <img id="crystal2" src="./assets/images/crystal_2.png" alt="crystal 2">
        <img id="crystal3" src="./assets/images/crystal_3.png" alt="crystal 3">
        <img id="crystal4" src="./assets/images/crystal_4.png" alt="crystal 4">
    </div>
</div>

【讨论】：

非常感谢，我有需要使用 .data() 的想法，但无法弄清楚如何正确实现它，谢谢你的帮助。
@CortlandTaylor 没问题。

【解决方案2】：

您没有正确添加数据属性。
使用jQuery's append 用于将内容插入到匹配元素集上每个元素的末尾。

您应该使用jQuery's data 方法。

$('#crystal1').data('crystal', Math.floor(Math.random() * 25));

这将在所有匹配的元素上设置data-crystal 属性并具有所需的值。

这是一个fiddle ，其中包含一个工作代码。

【讨论】：