javascript - 我可以将 HTML 元素中的属性传递给 JQuery .delay() 函数吗？

Question

我试图将页面上文本的显示延迟(实际上是在 Twine 中 - https://twinery.org/ )，延迟时间是在 span 对象的属性中定义的量，如下所示:

$(".fadeIn").each(function() {
  alert(parseInt($(this).attr("fadeInAfter")))
});

$(".fadeIn").delay(parseInt($(this).attr("fadeInAfter"))).fadeIn(1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="hide fadeIn" fadeInAfter="1000">This should fade in after 1 second</span>

<span class="hide fadeIn" fadeInAfter="5000">This should fade in after 5 seconds</span>

使用此代码，警报框会以正确的值触发，但范围会立即淡入。

我想做的事情可能吗？我的处理方式是否错误？

谢谢

Answer 1

您的代码之间有一个非常重要的区别，其中 alert()被调用并设置延迟的代码: .each()方法调用每个的回调函数 <span>单独。这就是获取属性值有效的原因。在你的.delay()调用时，代码的计算结果为 this设置为调用上下文中的任何值。

很容易解决:做你的 .delay()调用.each()回调也:

$(".fadeIn").each(function() {
  $(this).delay(parseInt($(this).attr("fadeInAfter"))).fadeIn(1000);
});