Question

我有一些变量需要传递给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变量。

https://jsfiddle.net/orou3kLy/

Answer 1

它们的存储方式不同。

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

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

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

Answer 2

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>

Answer 3

这是因为您正在错误地读取数据。您正在使用：

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

但您需要使用$('#parent').data('spin')而不是$('#parent').attr('data-spin')。这是工作小提琴：https://jsfiddle.net/orou3kLy/2/

Answer 4

您可以像编写属性值一样读取属性值：

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

你必须要小心，因为属性中的所有值都是字符串。关于data特殊行为，我建议仔细查看JQuery文档，使用数据不是很直观。

jQuery没有获取当前数据值

4 个答案: