时间戳

首页 > 解决方案 > 我可以将 HTML 元素的属性传递给 JQuery .delay() 函数吗？

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

问题描述

我试图将页面上文本的出现（实际上是在 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>

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

我正在尝试做的事情可能吗？我是不是走错了路？

谢谢，

标签： javascriptjqueryhtml

解决方案

alert()调用的代码和设置延迟的代码之间有一个非常重要的区别：该方法分别为每个.each()调用您的回调函数。这就是获取属性值有效的原因。在您的调用中，代码被评估为设置为调用上下文中的任何内容。 <span>.delay()this

这很容易解决：也可以.delay()在.each()回调中进行调用：

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

推荐阅读