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

Question

我正在尝试将 Math.random 函数 append 到图像上的数据晶体属性。单击图像时，它会显示随机分配给 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 时，data-crystal 被正确 append 。我已尽我所能修复它，但似乎无法更正它。这是我在 Stack Overflow 上的第一篇文章，如果这是一个常见问题或过于简单，我深表歉意。

Answer 1

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

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

Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

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>