如何将当前迭代的元素(this)传递到.each()函数中的setTimeout中?

Question

我正在尝试使用each()函数遍历divcaption内部的每个caption-element，获取captionin、captionout和delayout属性，接下来captionout属性中给出的该元素的removeClass(不检查该类是否已添加(并addClass到captionin属性中给出的该元素。这很容易，而且效果很好。

接下来，我试图逆转从captionin和captionout属性中添加和删除类的整个过程，但这次是将它延迟delayout属性中给定的时间量(通过使用setTimeout()函数(。而且它不起作用。

整个 ide 是为每个迭代元素提供它自己的 setTimeout 延迟，取自delayout属性。

对一个完整的菜鸟的每一个帮助都非常感谢:)

.HTML：

<div class="caption">
<div id="1" class="caption-container">
<h1 class="caption-element animated" captionin="fadeInUp" captionout="bounceOut" delayout="2000">Caption 1</h1>
</div>
<div id="2" class="caption-container">
<h1 class="caption-element animated" captionin="swing" captionout="fadeOutDown" delayout="4000">Caption 2</h1>
<h1 class="caption-element animated" captionin="bounceInUp" captionout="lightSpeedOut" delayout="3000">Caption 2</h1>
</div>
<div id="3" class="caption-container">
<h1 class="caption-element animated" captionin="bounceInUp" captionout="rotateOutUpLeft" delayout="2500">Caption 3</h1>
</div>
</div>

jQuery

jQuery('.caption .caption-element').each(function () {
var captionin = jQuery(this).attr('captionin');
var captionout = jQuery(this).attr('captionout');
var delayout = jQuery(this).attr('delayout');
jQuery(this).removeClass(captionout).addClass(captionin);
setTimeout(function () {
jQuery(this).removeClass(captionin).addClass(captionout);
}, delayout, captionin, captionout);
});

PS，请在投反对票之前在评论中提问，谢谢:)

Answer 1

两个问题。

1- 范围。this在不同的功能中this不同。更多关于this. 我通过在变量中捕获JQuery(this)并在代码中使用它来解决此问题。因此，当我想从代码中的其他地方访问选定的元素$elem时，这不会让我感到惊讶。

2-我假设setTimeout需要一个数字作为时间单位的值。您正在传递一个字符串。

jQuery('.caption .caption-element').each(function() {
var $elem = jQuery(this);
var captionin = $elem.attr('captionin');
var captionout = $elem.attr('captionout');
var delayout = $elem.attr('delayout');
console.log("Before: " + $elem.attr("class"));
$elem.removeClass(captionout).addClass(captionin);
setTimeout(function(captionin, captionout) {
$elem.removeClass(captionin).addClass(captionout);
console.log("After:" + $elem.attr("class"));
}, Number(delayout), captionin, captionout);
});

<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<div class="caption">
<div id="1" class="caption-container">
<h1 class="caption-element animated" captionin="fadeInUp" captionout="bounceOut" delayout="2000">Caption 1</h1>
</div>
<div id="2" class="caption-container">
<h1 class="caption-element animated" captionin="swing" captionout="fadeOutDown" delayout="4000">Caption 2</h1>
<h1 class="caption-element animated" captionin="bounceInUp" captionout="lightSpeedOut" delayout="3000">Caption 2</h1>
</div>
<div id="3" class="caption-container">
<h1 class="caption-element animated" captionin="bounceInUp" captionout="rotateOutUpLeft" delayout="2500">Caption 3</h1>
</div>
</div>

结果：

Before: caption-element animated
Before: caption-element animated
Before: caption-element animated
Before: caption-element animated
After:caption-element animated bounceOut
After:caption-element animated rotateOutUpLeft
After:caption-element animated lightSpeedOut
After:caption-element animated fadeOutDown