我有一些变量需要传入 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'));
});
我尝试将函数附加到.scroll 函数或根本没有函数但结果相同。
我附上了 jsfiddle 示例。第一行记录随机数，第二行存储数据。
任何想法为什么它不采用该字段的当前值？
该变量用于不同的功能，所以我不能使用number 变量。
【问题讨论】：
标签： javascript jquery
它们的存储方式不同。
尝试使用与获取数据相同的方式进行存储：
$('#parent').scroll(function() {
var number = 1 + Math.floor(Math.random() * (12));
$('#parent').data('spin', number);
console.log($('#parent').data('spin'));
});
【讨论】：
tl;dr: .data 和 .attr 是存储数据的不同方法。 .attr 将您的数据直接存储为属性。我想对于您的方法，您应该使用.data 保存您的号码，因为它也保留了数据类型。
另外，为了获得更好的性能，请将 jQuery 选择器存储在一个变量中，因为查询每个滚动周期都需要时间。
最后一件事：number 经常被用作 JavaScript 中的类型描述（或者在一些 JS 扩展如 TypeScript 和 Flow 中更好）。所以最好在那里重命名你的变量。
这是一个工作示例：
const $parent = $( '#parent' );
$parent.scroll(function() {
var num = 1 + Math.floor(Math.random() * (12));
$parent.data('spin', num);
console.log($parent.data('spin'));
});#parent {
background: lightgreen;
max-width: 300px;
max-height: 300px;
overflow: auto;
}
.content {
min-height: 200vh;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div class="content">---</div>
</div>【讨论】：
这是因为您读取数据不正确。您正在使用：
$('.kid').html('<strong>number:</strong> ' + number + '<br><strong>data:</strong> ' + $('#parent').data('spin'));
但是你需要使用$('#parent').attr('data-spin') 而不是$('#parent').data('spin')。这是工作小提琴：https://jsfiddle.net/orou3kLy/2/
【讨论】：
您可以像编写它一样读取属性值：
$('#parent').attr('data-spin');
你必须小心，因为属性中的所有值都是字符串。至于data的特殊行为，我建议仔细看一下JQuery文档，使用数据不是很直观。
【讨论】：