Question

我正在尝试将Math.random函数附加到图像上的data-crystal属性。单击该图像时，它将在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时，即使我在我的开发工具中查看HTML时，也会得到NaN，数据水晶已正确附加。我已经尽力解决了所有问题，但似乎无法纠正。这是我关于Stack Overflow的第一篇文章，很抱歉，这是一个常见问题还是过于简单。

Answer 1

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

文档指出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>

Answer 2

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

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

public void AddEditRequestView(View viewc){
AddEditRequest(null);
}

这将为所有匹配的元素设置Button button_add = findViewById(R.id.button_add); button_add.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { AddEditRequest(null); } });属性，并使其具有所需的值。

这是一个fiddle，带有有效代码。

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

2 个答案: