如何將當前迭代的元素（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