如何将当前迭代的元素（this）传递给.each（）函数中的setTimeout？

Question

我试图通过每个使用each()功能caption-element内caption格迭代，得到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，问评论问题downvoting前请，谢谢:)

Answer 1

两个问题。

1-范围。 this是不一样的this在不同的功能。 More about 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