Javascript jQuery未获取当前数据值

我有一些变量需要在jQuery/HTML中传递以供进一步使用。我得到了随机生成的数字，以后需要使用，所以我将其保存为父元素上的

data spin

当我试图访问数据时，它保持不变——设置一次，即使值更改，变量仍会显示第一个值

$('#parent').scroll(function() {
    var number = 1 + Math.floor(Math.random() * (12));
    $('#parent').attr('data-spin', number);

    console.log($('#parent').data('spin'));
});

我尝试将函数附加到

。滚动
函数或根本没有函数，但结果相同

我将附加JSFIDLE示例。第一行记录随机数，第二行存储数据

知道它为什么不取字段的当前值吗

该变量用于不同的函数，因此我不能使用
number
变量

它们的存储方式不同

尝试使用与获取数据相同的方式进行存储：

$('#parent').scroll(function() {
    var number = 1 + Math.floor(Math.random() * (12));
    $('#parent').data('spin', number);

    console.log($('#parent').data('spin'));
});

这是因为您读取的数据不正确。您正在使用：

$('.kid').html('<strong>number:</strong> ' + number + '<br><strong>data:</strong> ' + $('#parent').data('spin'));

$（'.kid'）.html（'编号：'+number+'
数据：'+$（'#父'）.data（'spin'））；

但是，您需要使用
$（'#parent'）.data（'spin'）
而不是
$（'#parent'）.attr（'data-spin'）
。这里是工作提琴：
您可以用编写属性值的相同方式读取属性值：

$('#parent').attr('data-spin');

但是您必须小心，因为属性中的所有值都是字符串。至于
数据
特殊行为，我建议仔细查看JQuery文档，使用数据不是很直观；dr:
.data
和
.attr
是存储数据的不同方法
.attr
将数据直接存储为属性。我想对于您的方法，您应该使用
.data
保存您的号码，因为它同时保留数据类型

此外，为了获得更好的性能，请将jQuery选择器存储在变量中，因为查询每个滚动周期都需要时间

还有最后一件事：
number
通常在JavaScript中用作类型描述（或者更好地用于某些JS扩展，如TypeScript和Flow）。因此，最好在那里重命名变量

下面是一个工作示例：


const$parent=$（'#parent'）；
$parent.scroll（函数（）{
var num=1+Math.floor（Math.random（）*（12））；
$parent.data（'spin'，num）；
log（$parent.data（'spin'））；
});
#父级{
背景：浅绿色；
最大宽度：300px；
最大高度：300px；
溢出：自动；
}
.内容{
最低高度：200vh；
}

---
您也可以阅读此问题中的anwser，了解有关数据可能重复的一些解释